1

下のタグの幅から、タグの幅を決めることができるのではないかと思いました。

私は現在このテーブルを持っています：

<table>
  <tr>
    <td>This title is way too long and screws up my style</td>
    <td>Title2</td>
    <td>Title 3</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image1.jpg" /></td>
    <td><img src="http://domain.com/image2.jpg" /></td>
    <td><img src="http://domain.com/image3.jpg" /></td>
  </tr>
</table>

下の画像の幅に基づいてタイトルタグを拡大縮小する方法はありますか？

それが明確であることを願っています。

4

2 に答える 2

1

これはちょっとしたハックと見なされるかもしれませんが、上の行のセルの幅を最小許容値に設定すると、2番目の行のセルが列を拡張します。サンプルは次のとおりです。

 <style>
     tr.titles td {
         width: 1px;
     }
 </style>

<table>
  <tr class="titles">
    <td>This title is way too long and screws up my style</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image2"/></td>
  </tr>
</table>

したがって、この場合、列の幅を決定するのは画像であり、全体の幅は画像の幅と等しくなります。

于 2013-02-26T16:30:12.937 に答える
0

jqueryで方法を提案できます。このコードを確認してください：

これがテーブルの場合。IDを指定します。

<table id='mytable'>
  <tr>
    <td>This title is way too long and screws up my style</td>
    <td>Title2</td>
    <td>Title 3</td>
  </tr>
  <tr>
    <td><img src="http://domain.com/image1" /></td>
    <td><img src="http://domain.com/image2" /></td>
    <td><img src="http://domain.com/image3" /></td>
  </tr>
</table>

したがって、スクリプト部分では

<script>
$(document).ready(function () {
            $('#myTable > tr > td').click(function () {
                 var width = $(this).next('td').children('img').prop('width');
                 $(this).prop('width',''+width+'px');
            });
});
</script>
于 2013-02-26T18:06:09.920 に答える