考勤表Checkbox与日期表头未对齐，求正确对齐解决方案

核心问题 #

你当前的代码把日期表头和数据行放在了两个独立的<table>标签里，两个表格会各自计算列宽，自然没法对齐。另外CSS里还有语法错误，也会影响样式生效。

具体修复步骤 #

1. 合并表格结构：把表头和数据行合并到同一个<table>中，用<thead>包裹表头，<tbody>包裹数据行，让表格自动统一列宽。
2. 修正CSS语法错误：删除多余的闭合大括号，统一表头和单元格的对齐规则，确保checkbox在单元格内居中，和表头日期对齐。
3. 清理重复代码：你的HTML里重复了两次完整的考勤表结构，删掉重复部分，避免冗余。
4. 统一表格宽度：给表格设置合适的宽度（比如width: 100%），让列宽均匀分配。

修改后的完整代码 #

HTML部分

<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<!-- 合并后的表格：表头和数据行在同一个table里 -->
<table id="dataTable" border="1">
  <thead>
    <tr>
      <th class="name-col">Name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th>13</th>
      <th>14</th>
      <th>15</th>
      <th>16</th>
      <th>17</th>
      <th>18</th>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
      <th>24</th>
      <th>25</th>
      <th>26</th>
      <th>27</th>
      <th>28</th>
      <th>29</th>
      <th>30</th>
      <th>31</th>
      <th>操作</th> <!-- 新增操作列表头，对应删除按钮 -->
    </tr>
  </thead>
  <tbody>
    <tr class="visitor">
      <td class="name-col"><input type="text" placeholder="Your name"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td>
        <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" value="Add Row" onclick="addRow('dataTable')">

CSS部分

body {
  line-height: 1.9;
  margin: 2em;
  overflow-x: auto; /* 替换过大的min-width，让表格超出时可横向滚动 */
}

table {
  width: 100%; /* 表格宽度占满容器，自动分配列宽 */
  border-collapse: collapse; /* 合并边框，避免重复边框 */
}

th {
  background-color: #001f3f;
  color: #fff;
  padding: 1em 1.3em;
  text-align: center; /* 表头文字居中，和checkbox对齐 */
}

td {
  border-top: 5px solid #eee;
  padding: 0.5em 1em;
  text-align: center; /* 单元格内容居中 */
}

input {
  cursor: pointer;
}

/* Column types */
th.missed-col {
  background-color: #f00;
}

th.attend-col {
  background-color: #f00;
}

td.attend-col {
  background-color: #ffecec;
  color: #f00;
}

.name-col {
  text-align: left;
  min-width: 11rem;
}

input::placeholder {
  font-weight: bold;
  opacity: .5;
  color: black;
}

JS部分

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    
    switch (newcell.childNodes[0]?.type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
    }
  }
}

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

额外说明 #

• 新增了操作列表头，和数据行的删除按钮对应，让表格结构更完整。
• 把body的min-width: 1000000px改成overflow-x: auto，避免页面强制过宽，表格超出时可横向滚动。
• 给表格加了border-collapse: collapse，让边框更整齐。
• 统一了表头和单元格的text-align，确保内容居中对齐。

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