如何使表格单元格内的 div 跟随单元格的宽度？

Question

我有一个这样的表:

<table style="width: 100%;">
<tr>
<td>
Title 1
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Title 2
</td>
<td>
More stuff
</td>
</tr>
</table>

表中的列根据所需空间和可用空间进行自我调整。现在我想在标题下添加一个副标题，当它变得太长时，它会被截断:

<table style="width: 100%;">
<tr>
<td>
<div>Title 1</div>
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Subtitle that might be long
</div>
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
<div>Title 2</div>
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Subtitle that might be long
</div>
</td>
<td>
More stuff
</td>
</tr>
</table>

表现在将根据副标题的宽度调整列的大小，以便它可以显示尽可能多的副标题。我不想要这个，我想要subtitlediv基本上跟着它周围的大小，并以最终的宽度渲染。

是否有一种简单、通用的方法来完成这类事情?

我尝试过其他选择，比如根据视口显式设置宽度，但它总是导致奇怪的行为，因为页面上有其他响应元素，使表的大小与视口相比可变。所以这些解决方案是次优的，理想情况下，我只是希望div在宽度计算期间被忽略，只是得到单元格最终的宽度。

Answer 1

如果您希望某个元素不在其周围回流其他内容，那么您需要将该元素从中取出。正常文档流程

一种方法是通过position: absolute定位元素。请注意，您当然需要创建一个显式的"空格"。为了让它存在，因为根据设计，我们说这个字幕是不流畅的，所以它不会创造自己的空间!

注意，这也有一个缺点，我们为它创建的空间是固定的。在您的示例中，您提到希望副标题位于标题下的，因此这会对标题进行假设，即标题有多高(有多少行)。对于本例，它假设标题是1行，或1em值的垂直空间。如果这个限制太大，你需要调整布局，或者使用javascript动态设置元素的位置。我不建议那样做。

table {
width: 100%;
}
td {
position: relative;
}
.title {
/* Create 1 line of space for subtitle below */
margin-bottom: 1em;
}
.subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

position: absolute;

top: 1em;
left: 0;
width: 100%;
height: 100%;
}

<table border="1">
<tr>
<td>
<div class="title">Title 1</div>
<div class="subtitle">
Subtitle that might be long. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
<div class="title">Title 2</div>
<div class="subtitle">
Subtitle short
</div>
</td>
<td>
More stuff
</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>
<div class="title">Title 1</div>
<div class="subtitle">
Subtitle that might be long. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</td>
<td>
Stuff
</td>
<td>
Extra Stuff
</td>
</tr>
<tr>
<td>
<div class="title">Title 2</div>
<div class="subtitle">
Subtitle that might be long
</div>
</td>
<td>
More stuff
</td>
<td>
Lots more stuff
</td>
</tr>
</table>