tbody设置overflow-y后缩为单列，求修复以保持表格宽度

问题描述 #

为tbody设置max-height和overflow-y: auto实现滚动效果后，tbody收缩成单列，设置width:100%或w-100类均无效，需要恢复表格正常宽度，同时保留tbody滚动功能。

问题原因 #

将tbody的display设为block后，破坏了表格原生的table-layout布局机制，tbody脱离了与thead的列宽联动上下文，导致列宽收缩错乱。

解决方案 #

通过固定表格布局、同步thead与tbody的宽度适配滚动条，实现表头固定+tbody滚动且列宽对齐的效果：

修改后的CSS代码 #

.item-list .item-detail{
    margin: 0 0 2px 4px;
    font-size: 1.25em;
}

.table > :not(caption) > * > * {
    padding: 0.3rem 0.3rem !important;
    background-color: var(--vz-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--vz-table-accent-bg);
}
.color-display{
    display: inline-block;
    width: 16px;
    height: 16px;
}
.text-center {
    text-align: center !important;
}

/* 修复滚动tbody的核心样式 */
.table {
    table-layout: fixed; /* 固定表格布局，保证列宽一致 */
    width: 100%;
}
thead {
    display: table; /* 保持表头的表格布局 */
    width: calc(100% - 17px); /* 减去滚动条宽度，避免表头与内容错位 */
}
.tbody-responsive{
    display: block;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}
/* 为表头和单元格设置统一列宽，可根据需求调整比例 */
thead th, tbody td {
    width: 33.33%;
}

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

<div class="item-list py-4">
  <div class="item-header">

  </div>
  <div class="item-body">
    <div class="row">
      <div class="col-12">
        <table class="table">
          <thead>
            <th>
              <h4><b>DETAIL</b></h4>
            </th>
            <th class="text-center">
              <h4><b>STOCK (Client)</b></h4>
            </th>
            <th class="text-center">
              <h4><b>STOCK (XXX)</b></h4>
            </th>
          </thead>
          <tbody class="tbody-responsive">

            <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>
            
             <tr>
              <td class="item-detail"> Polo SE, Red <span class="color-display" style="background-color: red"></span>, XL</td>
              <td class="item-detail text-center">1</td>
              <td class="item-detail text-center">1</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

关键说明 #

• table-layout: fixed让表格列宽基于表头单元格计算，避免内容撑开列宽导致错位。
• width: calc(100% - 17px)用于抵消tbody滚动条占用的宽度，保证表头与tbody列对齐（17px为常见滚动条宽度，若需兼容不同浏览器可通过JS动态获取）。
• 统一设置th和td的宽度比例，确保表头与内容列宽完全匹配。

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