如何构建tbody可垂直滚动的HTML/CSS单列表格？

修改后的完整代码 #

CSS 代码

.dialog_table {
  border: 1px solid grey;
  border-collapse: collapse;
  background-color: orange;
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免表头与内容列宽不一致 */
}

.dialog_thead {
  color: white;
  background-color: purple;
  display: table-header-group; /* 保持表头为表格头部组，维持布局结构 */
}

.dialog_tbody {
  border: 1px solid grey;
  max-height: 300px; /* 设置最大高度，超过则触发滚动 */
  overflow-y: auto;
  display: block; /* 转为块级元素，使overflow生效 */
}

.dialog_th {
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border: 1px solid grey;
  width: 100%;
  white-space: nowrap;
}

.dialog_td {
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border: 1px solid grey;
  width: 100%;
  white-space: nowrap;
}

.dialog_tr:hover {
  background-color: green;
}

/* 可选：隐藏滚动条但保留滚动功能，避免列宽偏移 */
.dialog_tbody::-webkit-scrollbar {
  width: 0;
}

HTML 代码

<table class="dialog_table">
  <thead class="dialog_thead">
    <tr>
      <th class="dialog_th">COLUMN 1</th>
    </tr>
  </thead>
  <tbody class="dialog_tbody">
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 1</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 2</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 3</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 4</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 5</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 6</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 7</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 8</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 9</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 10</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 11</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 12</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 13</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 14</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 15</td>
    </tr>
    <tr class="dialog_tr">
      <td class="dialog_td">DATA 16</td>
    </tr>
  </tbody>
</table>

关键修改说明 #

1. tbody滚动功能修复

   • 给.dialog_tbody设置max-height（可根据需求调整数值），同时添加display:block——只有块级元素且有固定高度/最大高度时，overflow-y:auto才会生效。
   • 表格保留默认的table布局，改用table-layout:fixed确保表头与内容列宽一致。

2. 右侧多余网格修复

   • 修正HTML结构：thead内部必须包裹<tr>标签，表头单元格使用<th>而非<td>，避免布局错乱。
   • 修正类名错误：原代码中所有<tr>的类名误写为dialog_tbody，改为dialog_tr，解决样式冲突。
   • 统一单元格宽度：给.dialog_th和.dialog_td都设置width:100%，配合table-layout:fixed消除列宽偏移问题。
   • 优化边框设置：去掉thead、tbody的冗余边框，仅保留表格和单元格的边框，避免叠加产生多余线条。

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