table-layout:fixed下如何无需硬编码单元格宽度设置百分比内边距？

我有一个列数动态变化的表格，要求每列宽度相等，因此设置了：

table
{ 
   table-layout: fixed; 
}

该设置效果良好，但我想给部分单元格设置百分比内边距。由于列数不确定，无法硬编码这些单元格的宽度。若直接设置：

table tbody tr td.with_padding
{
   padding: 20%;
}    

发现内边距是基于整个表格宽度计算，而非单个单元格宽度。请问能否用纯CSS解决这个问题？

可以通过两种纯CSS方式解决这个问题：

方法一：嵌套容器元素（推荐） #

这是最通用且易维护的方案，利用子元素百分比内边距基于父元素宽度计算的特性：

• 调整HTML结构：给需要内边距的<td>内部添加一个<div>容器：

<td class="with_padding">
  <div>单元格内容</div>
</td>

• 修改CSS样式：

table {
  table-layout: fixed;
  width: 100%; /* 确保表格有明确宽度，fixed布局生效 */
}

table tbody tr td.with_padding {
  padding: 0; /* 移除单元格本身的内边距 */
}

table tbody tr td.with_padding > div {
  padding: 20%; /* 此时百分比内边距基于单元格宽度计算 */
}

原理：table-layout: fixed让每列宽度均等，<td>因此拥有明确的宽度，内部<div>的百分比内边距会基于这个单元格宽度计算，而非整个表格的宽度。

方法二：使用CSS伪元素（无额外DOM元素） #

如果不想添加额外的DOM元素，可以用伪元素模拟内边距：

table {
  table-layout: fixed;
  width: 100%;
}

table tbody tr td.with_padding {
  position: relative;
  padding: 0;
}

/* 模拟垂直方向内边距 */
table tbody tr td.with_padding::before {
  content: '';
  display: block;
  padding-top: 20%;
}

/* 模拟水平方向内边距 */
table tbody tr td.with_padding::after {
  content: '';
  display: inline-block;
  width: 20%;
  vertical-align: middle;
}

注意：这种方式需要根据单元格内容的排版需求（比如垂直居中、文本对齐等）做细节调整，适配性不如嵌套容器的方法。

内容的提问来源于stack exchange，提问作者Brain in a fish tank