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

This might be considered a bit of a hack, but if you set the width of cells in the upper row to have a minimum acceptable value, the cells in the second row will expand the columns. Here's a sample:

 <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>

So in this case it will be the image, that determines the width of the column, and the overall width will be equal to the image width.

于 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 回答