如何让表格行占满宽度、表格数据对齐表头并居中显示

针对你遇到的表格数据无法对齐表头的问题，可尝试以下几种实用方法：

1. 统一文本对齐规则 #

给表头（th）和数据单元格（td）设置一致的文本对齐方式，确保列内内容对齐：

table th, table td {
  text-align: center; /* 可根据需求替换为 left 或 right */
}

2. 固定表格布局避免宽度偏差 #

启用table-layout: fixed强制表格列宽均匀分配，避免因内容长短导致的列宽不一致：

table {
  table-layout: fixed;
  width: 100%; /* 也可设置具体固定宽度，比如 800px */
}

如果需要自定义列宽，可针对对应列设置：

/* 给第一列设置宽度 */
table th:nth-child(1), table td:nth-child(1) {
  width: 25%;
}
/* 给第二列设置宽度 */
table th:nth-child(2), table td:nth-child(2) {
  width: 35%;
}

3. 重置表格默认样式消除间距干扰 #

浏览器自带的表格样式可能存在额外内边距或边框间距，通过以下CSS重置：

table {
  border-collapse: collapse; /* 合并边框，消除默认间距 */
}
table th, table td {
  padding: 8px 12px; /* 统一内边距，避免内容偏移 */
  border: 1px solid #e0e0e0; /* 可选，添加边框便于观察对齐效果 */
}

4. 排查冲突样式 #

检查是否有自定义CSS类、全局样式给表头或单元格添加了margin、padding、float等属性导致错位。可通过浏览器开发者工具的元素面板，逐一排查并覆盖冲突样式。

内容的提问来源于stack exchange，提问作者meWho