如何让表格td单元格内的两个<p>元素不影响单元格尺寸？

当给部分td单元格添加<p>元素后，表格会默认根据内容自动调整单元格宽度，导致一周7列宽度不均。以下是两种简单有效的解决方法：

方法一：使用表格固定布局（推荐） #

给表格设置table-layout: fixed，让列宽度强制均分，不受内容影响：

table {
  table-layout: fixed;
  width: 100%; /* 让表格占满父容器宽度，也可设具体值如1200px */
}

td {
  border: 1px solid #ddd;
  height: 200px;
  vertical-align: top;
  padding:5px;
}

td > p {
  text-align: center;
  font-size: 12px;
}

table-layout: fixed会让表格按预设规则分配列宽，配合width:100%，7个td会自动均分表格总宽度，彻底避免内容影响宽度。

方法二：直接给td设置均分宽度 #

通过calc(100% / 7)给每个td设置固定百分比宽度，同时加上box-sizing: border-box确保padding和border不额外撑开宽度：

td {
  border: 1px solid #ddd;
  height: 200px;
  vertical-align: top;
  padding:5px;
  width: calc(100% / 7);
  box-sizing: border-box;
}

td > p {
  text-align: center;
  font-size: 12px;
  word-wrap: break-word; /* 可选：长文本自动换行，避免撑爆单元格 */
}

两种方法都能保证7个单元格宽度统一，且不会破坏你已设置的内容布局。

内容的提问来源于stack exchange，提问作者Ed-Ryan