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>

无论如何根据下面图像的宽度缩放Title标签？

希望很清楚。

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>

根据下面的宽度确定宽度？

2 个答案: