如何使表格单元格内的 div 宽度跟随单元格
在网页开发中，我们经常会遇到需要让表格单元格内的 <div> 元素宽度完全跟随单元格宽度变化的需求，这种场景常见于响应式表格布局、动态内容展示等场景。如果处理不当，可能会出现 <div> 宽度溢出、无法填满单元格或者与单元格宽度不匹配的问题，下面我们详细分析实现方法和注意事项。
核心实现原理
表格单元格（<td> 或 <th>）的宽度默认由表格布局算法、内容宽度以及设置的宽度属性共同决定，而块级元素 <div> 默认宽度是父容器宽度的100%，但需要排除父容器的内边距、边框等影响，才能保证 <div> 宽度和单元格内容区域宽度完全一致。
基础实现方法
最基础的实现方式是通过CSS设置单元格和内部 <div> 的样式，核心是确保单元格没有额外内边距干扰，同时 <div> 宽度设置为100%且不产生外边距或边框溢出。
/* 表格基础样式 */
table {
border-collapse: collapse; /* 合并边框，避免边框占用额外宽度 */
width: 100%; /* 表格占满父容器宽度，可根据需求调整 */
}
/* 单元格样式 */
td {
padding: 0; /* 清除默认内边距，避免内边距占用单元格内容区域宽度 */
border: 1px solid #ccc; /* 可选边框，根据需求设置 */
}
/* 单元格内div样式 */
td > div {
width: 100%; /* 宽度跟随单元格内容区域 */
margin: 0; /* 清除默认外边距 */
box-sizing: border-box; /* 可选，若div有边框或内边距，可保证总宽度不超出单元格 */
}对应的HTML结构如下：
<table> <tr> <td> <div>单元格内的div内容</div> </td> <td> <div>另一个单元格内的div内容</div> </td> </tr> </table>
常见场景与问题处理
场景1：单元格设置了固定宽度
如果单元格设置了固定宽度，比如 width: 200px，只要保证 <div> 的 width: 100%，且没有额外的外边距、内边距或边框超出，div就会自动跟随200px的宽度。
/* 固定宽度单元格 */
td.fixed-width {
width: 200px;
}
td.fixed-width > div {
width: 100%;
/* 若div需要内边距，可添加box-sizing: border-box */
padding: 10px;
box-sizing: border-box;
}场景2：表格使用自动布局
当表格没有设置固定宽度，使用默认的自动布局时，单元格宽度会根据内容自适应，此时内部的 <div> 依然会跟随单元格宽度变化，因为 width: 100% 是相对父容器（单元格）计算宽度的。
场景3：div内容过长导致宽度溢出
如果 <div> 内部的内容是长文本或者未设置换行的元素，可能会导致 <div> 宽度被内容撑开，超出单元格范围。此时可以添加文本换行或者溢出隐藏的样式：
td > div {
width: 100%;
word-wrap: break-word; /* 长单词换行 */
overflow-wrap: break-word; /* 兼容写法 */
/* 若需要溢出隐藏，可添加以下样式 */
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
}注意事项
不要给单元格设置
box-sizing: border-box除非明确需要，因为表格布局的边框计算方式和普通块级元素不同，容易导致宽度计算异常。如果单元格存在内边距，且希望 <div> 填满整个单元格（包括内边距区域），可以给 <div> 也设置
box-sizing: border-box，同时调整内边距到 <div> 上，避免宽度计算错误。避免使用绝对定位的 <div> 放在单元格内，绝对定位的元素会脱离文档流，无法跟随单元格宽度变化。
示例代码验证
以下是一个完整的可运行示例，你可以直接复制到HTML文件中查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格单元格内div宽度跟随示例</title>
<style>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
td {
padding: 0;
border: 1px solid #666;
height: 50px;
}
td > div {
width: 100%;
height: 100%;
background-color: #f0f0f0;
text-align: center;
line-height: 50px;
}
.fixed-td {
width: 300px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="fixed-td">
<div>固定宽度300px的单元格，div跟随宽度</div>
</td>
<td>
<div>自适应宽度的单元格，div跟随宽度</div>
</td>
</tr>
<tr>
<td>
<div>另一个自适应单元格</div>
</td>
<td class="fixed-td">
<div>另一个固定宽度单元格</div>
</td>
</tr>
</table>
</body>
</html>运行上述代码后，你可以调整浏览器窗口大小，或者修改单元格的固定宽度值，会发现内部的 <div> 始终和单元格的宽度保持一致，满足跟随变化的需求。