Html 确定<；td>；基于宽度<；td>；在下面

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

我目前有以下表格：

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

这个标题太长了，搞砸了我的风格
标题2
标题3

是否有根据下面图像的宽度缩放标题标签的方法

---

希望它是清楚的。

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

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

tr.td{
宽度：1px；
}
这个标题太长了，搞砸了我的风格

---

因此，在这种情况下，将由图像决定列的宽度，总宽度将等于图像宽度。

这可能被认为有点不对劲，但如果将上排单元格的宽度设置为最小可接受值，则第二行的单元格将扩展列。以下是一个示例：

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

tr.td{
宽度：1px；
}
这个标题太长了，搞砸了我的风格

---

因此，在本例中，将由图像决定列的宽度，总宽度将等于图像宽度。

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

这个标题太长了，搞砸了我的风格
标题2
标题3

所以在脚本部分

<script>
$(document).ready(function () {
            $('#myTable > tr > td').click(function () {
                 var width = $(this).next('td').children('img').prop('width');
                 $(this).prop('width',''+width+'px');
            });
});
</script>

$（文档）.ready（函数（）{
$（'#myTable>tr>td'）。单击（函数（）{
var width=$（this）.next（'td'）.children（'img'）.prop（'width'）；
$（this.prop（'width'，''+width+'px'）；
});
});

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

这个标题太长了，搞砸了我的风格
标题2
标题3

所以在脚本部分

<script>
$(document).ready(function () {
            $('#myTable > tr > td').click(function () {
                 var width = $(this).next('td').children('img').prop('width');
                 $(this).prop('width',''+width+'px');
            });
});
</script>

$（文档）.ready（函数（）{
$（'#myTable>tr>td'）。单击（函数（）{
var width=$（this）.next（'td'）.children（'img'）.prop（'width'）；
$（this.prop（'width'，''+width+'px'）；
});
});

按比例是指缩小

字体大小吗？

是否允许使用JavaScript/jQuery（您没有将其添加到标记中）？您的目标是强制

TD

元素的宽度仅与下面一行中的

IMG

元素的宽度相同？感谢您的回复。为了更清晰，图像是通过循环收集的。请参阅此了解更多说明（wordpress函数）：是否有方法通过循环收集每个图像的图像宽度？ThanksBy scale您的意思是减小

字体大小吗？

？是否允许JavaScript/jQuery（您没有将其添加到标记中）？您的目标是强制

TD

元素的宽度仅与下面一行中的

IMG

元素的宽度相同？感谢您的回复。为了更清晰，图像是通过循环收集的。请参阅此了解更多说明（wordpress函数）：是否有方法通过循环收集每个图像的图像宽度？谢谢你的回复。然而，它似乎不起作用。标题的td采用了所需的全部宽度……有关我的问题的进一步澄清，请参见我在主题下的评论。。Thanksi添加了一些代码以获得图像的完整性。希望这能奏效。试试看。谢谢你的回复。然而，它似乎不起作用。标题的td采用了所需的全部宽度……有关我的问题的进一步澄清，请参见我在主题下的评论。。Thanksi添加了一些代码以获得图像的完整性。希望这能奏效。试试看。谢谢你的回复。这确实有效，但是没有更好的方法来实现这一点吗？为了更清晰，图像是通过循环收集的。请参阅此了解更多说明（wordpress函数）：是否有方法通过循环收集每个图像的图像宽度？谢谢如果我理解正确，您关心的是img元素上的style=“width:100px”。我想你可以省略宽度，让浏览器自动处理。很好，你想让第一行td减少宽度，就像第二行td一样？这是它：删除第一个td宽度，让第二个td适合内部图像。感谢您的回复。这确实有效，但是没有更好的方法来实现这一点吗？为了更清晰，图像是通过循环收集的。请参阅此了解更多说明（wordpress函数）：是否有方法通过循环收集每个图像的图像宽度？谢谢如果我理解正确，您关心的是img元素上的style=“width:100px”。我想你可以省略宽度，让浏览器自动处理。很好，你想让第一行td减少宽度，就像第二行td一样？就是这样：去掉第一个td宽度，让第二个td适合内部图像。