如何用SASS/CSS让HTML表格占满宽度（解决th字体缩小问题）

我懂你碰到的这个坑了——明明给表格设了width: 100%，结果因为表头<th>用了0.8em的小字体，表格右侧死活撑不满容器边框，又没法改HTML结构。咱们从CSS布局逻辑入手，就能轻松解决这个问题。

问题根源 #

你给<table>加了display: block，这直接改变了表格的原生布局规则：原生表格会自动分配列宽，让整个表格填满指定的宽度；但块级表格的宽度计算会依赖内部内容的宽度，当<th>字体缩小后，内容宽度跟着收缩，表格自然就撑不满100%了。另外，给表格本身加overflow: auto也会干扰原生的列宽分配逻辑。

修复方案 #

咱们调整CSS的几个关键属性，不用碰HTML就能解决：

1. 移除display: block：让表格回到原生的display: table布局（这是浏览器默认值，直接删掉这个属性就行），这样表格会自动用width: 100%分配列宽，填满容器。
2. 添加table-layout: fixed（推荐）：强制表格按照指定的100%宽度分配列宽，避免内容宽度影响整体表格宽度，确保表格始终撑满容器。
3. 调整滚动逻辑（如果需要）：如果要实现横向滚动，不要给表格加overflow: auto，而是给表格的父容器添加overflow-x: auto；如果没法控制父元素，也可以给表格设置display: block; overflow-x: auto;，同时保留width: 100%和table-layout: fixed。

修改后的完整CSS代码 #

table {
  color: black;
  background-color: white;
  border-color: black;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-radius: 5px;
  border-collapse: collapse;
  border-spacing: 0;
  /* 移除display: block，恢复原生表格布局 */
  width: 100%;
  /* 强制表格按总宽度分配列宽，确保撑满容器 */
  table-layout: fixed;
  /* 若需横向滚动，可启用下面两行（替换上面的width和table-layout也可） */
  /* display: block; */
  /* overflow-x: auto; */
}

table thead th {
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 0.8em;
  padding: 5px 10px;
  vertical-align: bottom;
  text-align: left;
}

table thead th:first-child {
  border-top-left-radius: 5px;
}

table thead th:last-child {
  border-top-right-radius: 5px;
}

/* 用CSS统一处理HTML中的align属性，无需修改HTML */
table thead th[align="right"],
table tbody td[align="right"] {
  text-align: right;
}

table tbody td {
  border-top: 1px solid gray;
  padding: 5px 10px;
  vertical-align: top;
}

table tbody tr:nth-child(2n) {
  background-color: lightgray;
}

效果说明 #

• 移除display: block后，表格回到原生布局，width: 100%会正常生效，表格自动撑满容器。
• table-layout: fixed确保列宽基于表格总宽度分配，不会因为<th>字体缩小而收缩，彻底解决右侧留白问题。
• 额外添加的[align="right"]选择器，用CSS统一处理内容对齐，比HTML的align属性更符合现代规范，且无需修改HTML结构。

这样调整后，不管<th>用多大的字体，表格都会稳稳地撑满100%宽度，同时保持你需要的样式和功能。

内容的提问来源于stack exchange，提问作者Muhammad Rehan Saeed