根据下面的宽度 <td> 确定 <td> 的宽度？

Question

我想知道是否可以根据下面标签的宽度来确定标签的宽度。

我目前有这张桌子：

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

是否可以根据下面图像的宽度来缩放标题标签？

希望清楚。

Answer 1

这可能被认为是一个小技巧，但如果您将上一行中单元格的宽度设置为可接受的最小值，第二行中的单元格将扩展列。这是一个示例：

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

所以在这种情况下，将由图像决定列的宽度，并且总宽度将等于图像宽度。

Answer 2

我可以建议一种使用 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>