HTML表格tbody设置滚动条后单元格对齐错乱问题求助

我太懂你这个头疼的问题了——给tbody加了滚动样式后，RTL布局下单元格直接和表头错位，这完全是因为修改了tbody和tr的display属性后，打破了表格原本的布局对齐逻辑。下面给你一套亲测可行的解决方案：

问题根源 #

当你把tbody设为display:block、tr设为display:table时，thead里的tr还是默认的table-row布局，两者的列宽计算规则和对齐方式在RTL环境下完全不兼容，自然就会错位。而且table-layout:fixed只加在tbody的tr上，也没法和thead的列形成关联。

解决方案 #

核心思路是让thead和tbody的列宽计算逻辑保持一致，同时保留tbody的垂直滚动功能，具体步骤如下：

1. 统一表格的全局布局规则 #

给整个表格设置table-layout:fixed和明确的RTL方向，让列宽由表头决定，tbody的单元格会自动匹配这个宽度：

.container {
  /* 保留原有样式，新增以下两行 */
  table-layout: fixed;
  direction: rtl; /* 明确指定RTL布局 */
}

2. 调整tbody滚动样式，保留tr的默认布局 #

不要修改tr的display属性，tbody用display:block实现滚动，同时设置width:100%确保和表格宽度完全一致：

#dynamic_table_2 {
  display: block;
  height: 100px;
  overflow-y: auto;
  width: 100%; /* 关键：避免滚动容器宽度收缩 */
}

/* 保留tr的默认布局，不要改成display:table */
#dynamic_table_2 tr {
  display: table-row;
}

3. 给表头和单元格设置统一宽度（可选但推荐） #

为了更精准控制列宽，避免RTL下的自适应偏差，可以给每个th和td设置相同的宽度（比如5列就各占20%）：

.container th, .container td {
  width: 20%; /* 5列均分宽度 */
  /* 保留原有padding、样式 */
}

修改后的完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial">
  <thead>
    <tr>
      <th><h1>Column1</h1></th>
      <th><h1>Column2</h1></th>
      <th><h1>Column3</h1></th>
      <th><h1>Column4</h1></th>
      <th><h1>Column5</h1></th>
    </tr>
  </thead>
</table>

CSS

.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}
.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}
.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
  /* 新增布局规则 */
  table-layout: fixed;
  direction: rtl;
}
.container td, .container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
  /* 新增统一列宽 */
  width: 20%;
}
/* 奇数行背景 */
.container tr:nth-child(odd) {
  background-color: #323C50;
}
/* 偶数行背景 */
.container tr:nth-child(even) {
  background-color: #2C3446;
}
.container th {
  background-color: #1F2739;
}
.container td:first-child {
  color: #FB667A;
}
.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}
.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: linear;
}
@media (max-width: 800px) {
  .container td:nth-child(4), .container th:nth-child(4) {
    display: none;
  }
}
/* 新增tbody滚动样式 */
#dynamic_table_2 {
  display: block;
  height: 100px;
  overflow-y: auto;
  width: 100%;
}
#dynamic_table_2 tr {
  display: table-row;
}

JavaScript

var mytable2 = "<tbody id='dynamic_table_2'><tr>";
for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr><tr>"; // 修正了你原代码里多出来的单引号
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody>";
$('#here2').append(mytable2);

为什么这样有效？ #

• table-layout:fixed让表格列宽由thead的th定义，tbody的td会自动继承对应宽度，即使tbody是display:block，tr保持table-row就能维持单元格的对齐关系。
• 明确设置direction:rtl确保RTL布局的一致性，不会因为display属性修改导致文本方向错乱。
• tbody设置width:100%避免滚动容器宽度收缩，保证和thead的宽度完全匹配。

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