如何让表格中的tr单元格均匀拉伸以适配屏幕？

你可以通过以下CSS修改实现需求，核心是利用表格布局的自动宽度分配特性：

table {
  width: 100%;
  display: block;
}

tbody,
thead {
  display: block;
}

td,
th {
  padding: 8px 60px;
  color: #ffffff;
  text-align: left;
}

thead {
  float: left;
  background: #ae6363;
}

thead tr {
  display: block;
}

th {
  display: block;
  border-bottom: 1px solid #fff;
}

tbody {
  display: table; /* 改为table容器，让内部table-cell自动分配宽度 */
  width: 100%;
  overflow-x: auto;
}

tbody tr {
  display: table-cell;
  border: 1px solid #fff;
  width: 1%; /* 触发均匀分配，所有列平分宽度 */
}

tbody td {
  border-right: 1px solid #FFFFFF;
  display: block;
  background: #ae6333;
}

/* 移除最后一个单元格的右边框 */
tbody td:last-child {
  border-right: none;
}

对应的HTML保持不变：

<table>
  <thead>
    <tr>
      <th>title</th>
      <th>title</th>
      <th>title</th>
      <th>title</th>
      <th>title</th>
      <th>title</th>
      <th>title</th>
      <th>title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

关键修改说明 #

1. tbody改为display: table：让内部的tr（设置为table-cell）处于表格布局环境中，才能触发自动宽度分配
2. tbody tr设置width: 1%：表格布局中，所有单元格设置相同的小百分比宽度时，会自动平分父容器的可用宽度，无论列数多少都能均匀拉伸
3. 优化表头样式：给th添加底部边框，保持竖排表头的分隔效果，同时移除不必要的样式冗余

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