在网页开发中，经常会遇到需要在表格单元格(<td>)内放置div元素，并希望该div元素的宽度能够自动适应单元格宽度，同时当内容超出单元格宽度时，能够使用省略号(...)进行截断显示。然而，默认情况下，div元素可能会影响表格的列宽计算，导致布局混乱。本文将介绍一种使用CSS定位属性(position: absolute)的解决方案，以确保div元素在不影响表格布局的前提下，跟随单元格的宽度。
使用position: absolute实现宽度自适应
核心思路是将子元素从正常的文档流中移除，这样它就不会参与到表格的列宽计算中。通过设置position: absolute，可以将div元素相对于其最近的已定位祖先元素（这里是<td>）进行定位。
HTML 结构:
<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>CSS 样式:
立即学习“前端免费学习笔记（深入）”；
table {
width: 100%;
}
td {
position: relative; /* 关键：设置td为relative，作为absolute元素的定位上下文 */
}
.title {
/* 为 subtitle 预留空间，假设 title 占据一行高度 */
margin-bottom: 1em;
}
.subtitle {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 使用省略号表示截断 */
position: absolute; /* 关键：将元素从文档流中移除 */
top: 1em; /* 距离顶部1em，与 title 的 margin-bottom 对应 */
left: 0; /* 左侧对齐 */
width: 100%; /* 宽度继承父元素 */
height: 100%;
}代码解释：
- table { width: 100%; }: 设置表格宽度为100%，使其占据可用空间。
- td { position: relative; }: 关键步骤。将<td>元素设置为position: relative，这使得.subtitle元素的position: absolute定位相对于<td>元素。
- .title { margin-bottom: 1em; }: 为标题下方创建一个1em的空白区域，为副标题预留显示空间。这个数值需要根据实际标题的高度进行调整。
-
.subtitle:
- white-space: nowrap;: 强制文本不换行。
- overflow: hidden;: 隐藏超出容器宽度的文本。
- text-overflow: ellipsis;: 当文本溢出时，显示省略号。
- position: absolute;: 将副标题从文档流中移除，使其不影响表格布局。
- top: 1em;: 将副标题定位到标题下方，与.title的margin-bottom值对应。
- left: 0;: 左侧对齐单元格。
- width: 100%;: 宽度设置为100%，使其继承父元素(<td>)的宽度。
- height: 100%;: 高度设置为100%，使其填充父元素(<td>)的高度。
注意事项
- 父元素定位： 确保position: absolute元素的父元素（本例中是<td>）设置了position: relative、position: absolute 或 position: fixed，否则position: absolute元素会相对于文档的根元素进行定位，导致布局错乱。
- 高度预留： 使用position: absolute后，需要为子元素预留足够的空间。本例中，通过.title的margin-bottom属性预留了空间。如果标题高度不固定，可能需要使用JavaScript动态计算高度，并设置相应的样式。
- 可维护性： 这种方法依赖于CSS样式，对HTML结构没有侵入性，易于维护和修改。
- 兼容性： 该方法在主流浏览器中均有良好的兼容性。
总结
通过使用position: absolute属性，我们可以轻松地解决表格单元格内div元素宽度自适应问题，同时保持内容溢出时的省略效果。这种方法简单有效，并且易于维护，适用于各种需要表格布局的场景。 掌握这种技巧，可以有效地避免表格布局混乱的问题，提升用户体验。
