如何对齐HTML表格的thead与tbody行？

制作调度表格时，无法让<thead> > <tr>的行与<tbody> > <tr>的行对齐，尝试过调整display CSS属性但未解决问题，恳请提供解决建议。

以下是相关代码及当前效果：

React表格组件代码 #

const headers = [
  "Work Area",
  "Monday",
  "Tuesday",
  ".....",
  ".....",
];

const columns = [
  "Morning Up Stairs",
  "Morning Down Stairs",
  "Morning Parking Lot",
  "Lunch A",
  "Lunch B",
  "Lunch C",
];

const Scheduler = () => {
  // 假设此处存在handleSelectChange、selectedOption、options等定义
  return (
    <div>
      <table>
        <thead>
          <tr>
            {headers.map((header) => (
              <th key={header}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {columns.map((colName, index) => (
            <tr key={index}>
              <td>{colName}</td>
              {headers.map((header, index) => (
                <td key={index}>
                  {index > 0 && (
                    <Select
                      value={selectedOption}
                      onChange={(selectedOption) =>
                        handleSelectChange(selectedOption, index, colName)
                      }
                      options={options}
                    />
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

CSS文件代码 #

table {
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 20px;
  border-collapse: separate;
  border: 1px solid black;
  padding: 5px;
}

.header {
  text-align: center;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
}

当前未对齐效果 #

解决建议 #

1. 修正列数不匹配问题（核心原因） #

你的代码中，<thead>的列数等于headers数组长度，但<tbody>每行的列数是1 + headers.length——因为你先写了一个<td>{colName}</td>，又循环整个headers数组生成额外单元格，导致列数不一致，这是对齐失效的核心原因。

修改方式：循环headers.slice(1)（跳过第一个"Work Area"表头）来生成后续列，确保tbody每行的列数和thead一致：

<tbody>
  {columns.map((colName, rowIndex) => (
    <tr key={rowIndex}>
      <td>{colName}</td>
      {/* 只循环headers中从第二个元素开始的部分 */}
      {headers.slice(1).map((header, colIndex) => (
        <td key={colIndex}>
          <Select
            value={selectedOption}
            onChange={(selectedOption) =>
              handleSelectChange(selectedOption, colIndex + 1, colName)
            }
            options={options}
          />
        </td>
      ))}
    </tr>
  ))}
</tbody>

2. 优化表格CSS布局（辅助对齐） #

添加table-layout: fixed固定表格列宽，避免内容拉伸导致的对齐偏差：

table {
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 20px;
  border-collapse: separate;
  border: 1px solid black;
  padding: 5px;
  table-layout: fixed; /* 添加固定布局 */
  width: 100%; /* 配合固定布局指定宽度 */
}

th, td {
  text-align: center; /* 统一单元格内容对齐方式 */
}

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