如何用纯CSS实现表格单元格宽高一致 不受内容及单元格数量影响

纯CSS实现方案 #

直接使用如下CSS规则即可满足需求：

/* 你可以把这里的宽高替换成自己需要的固定值 */
table {
  width: 600px;
  height: 400px;
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 可选，给单元格加边框方便查看边界 */
  border: 1px solid #eee;
}

/* 处理空单元格不塌陷的问题 */
td:empty::before {
  content: "";
  display: block;
}

核心规则说明 #

• table-layout: fixed：是实现需求的核心属性，开启后表格布局完全由你设置的表格总宽高决定，完全忽略单元格内容的长度，不会被内容撑大
• 单元格设置width: 100%、height: 100%：会让所有单元格自动平分表格的可用空间，无论单元格、行的数量怎么动态增减，都会自动按比例分配宽高，自动填满整个表格
• overflow: hidden：避免单元格内容过长撑破布局，你也可以根据需求替换为auto（超出出滚动条）或者搭配text-overflow: ellipsis实现超出显示省略号的效果

示例HTML结构 #

<table>
  <tr>
    <td>有内容的单元格</td>
    <td></td>
    <td>非常长的内容非常长的内容非常长的内容非常长的内容</td>
  </tr>
  <tr>
    <td></td>
    <td>短内容</td>
    <td></td>
  </tr>
</table>

后续你用JS动态增删行、单元格节点时，表格整体尺寸会始终保持你设置的固定值，所有单元格始终等宽等高填满整个表格。

内容的提问来源于stack exchange，提问作者Kiss Gergő