如何调整HTML表格中的标签使其对齐并保持原位

问题根源 #

1. HTML结构严重错误：你把表格表头<thead>（代码里拼写错误写成了thread）错误嵌套进了搜索区域的标签内，同时将表头和表格内容拆成了两个独立的<table>元素，两个表没有关联，列宽无法同步导致对齐失效。
2. CSS规则无效：border: -2px solid white的边框宽度为负数属于非法值，不生效；font: arial写法不符合font属性规范，也不会生效。
3. 缺少表格布局约束：没有给<table>设置table-layout: fixed规则，列宽会随内容自动变化，两个拆分的表内容不同自然宽度无法对齐。

修复方案 #

• 调整HTML结构：把搜索区域从表格中独立出来，不要嵌套在内，将表头<thead>和内容<tbody>放到同一个<table>元素内，修正标签嵌套、拼写错误、未闭合的问题。
• 修正CSS规则：删除无效的负边框属性，修正字体写法，给<table>添加table-layout: fixed和width: 100%保证列宽固定均匀。
• 滚动效果优化：要实现内容滚动表头固定的效果，不需要拆分表格，给表头添加position: sticky; top: 0即可实现，从根源避免双表对齐问题。

修复后代码示例 #

CSS代码 #

.table_read {
  font-family: Arial, sans-serif;
  padding: 22px;
  border-radius: 25px;
  border: 12px solid red;
}
.search-area {
  margin-bottom: 20px;
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
td, th {
  text-align: left;
  padding: 8px;
  width: 16.66%; /* 6列平均分配宽度 */
}
th {
  background-color: red;
  color: white;
  border: 1px solid red;
  position: sticky;
  top: 0;
}
/* 滚动区域 */
#table-scroll {
  height: 200px;
  overflow: auto;
  margin-top: 20px;
}
#table-scroll tr:nth-child(even) {
  background-color: #dddddd;
}

HTML代码 #

<div class="table_read">
  <div class="tabs">
    <!-- 独立的搜索区域 -->
    <div class="search-area">
      <h2> Search By: </h2>
      <input type="text" placeholder="Search">
      <input type="radio" value="First" id="First_name">
      <label for="First_name">First</label>
      <input type="radio" value="last" id="Last_name">
      <label for="Last_name">Last</label>
      <input type="radio" value="Date" id="Date_rec">
      <label for="Date_rec">Date</label>
      <input type="radio" value="Conf_num" id="Confirmation_Number">
      <label for="Confirmation_Number">Confirm Num.</label>
      <button style="width: auto; float: right;">Search</button>
    </div>
    <!-- 单个表格 包含表头和内容 -->
    <div id="table-scroll">
      <table>
        <thead>
          <tr>
            <th><span class="text">Date</span></th>
            <th><span class="text">First</span></th>
            <th><span class="text">Last</span></th>
            <th><span class="text">Phone</span></th>
            <th><span class="text">Confirmation</span></th>
            <th><span class="text">Edit</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>3/12/21</td>
            <td>Margin</td>
            <td>Billy</td>
            <td>555-3456</td>
            <td>234152121</td>
            <td>Add/Del</td>
          </tr>
          <tr>
            <td>1/1/21</td>
            <td>Bard</td>
            <td>Thomas</td>
            <td>553-3456</td>
            <td>834322121</td>
            <td>Add/Del</td>
          </tr>
          <tr>
            <td>1/6/21</td>
            <td>Jhon</td>
            <td>billy</td>
            <td>555-3456</td>
            <td>234152121</td>
            <td>Add/Del</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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