具有固定列宽和最大高度的 CSS 表格

Posted 2023-03-06

【中文标题】具有固定列宽和最大高度的 CSS 表格

【英文标题】：CSS table with fixed column widths and max height

【发布时间】：2019-07-31 18:16:25

【问题描述】：

我正在尝试创建一个具有固定列宽和固定最大高度的表格，它会滚动到最大高度之外。

阅读后，我会使用 table-layout:fixed 并指定列宽来完成第一个任务。我会在桌子上设置 max-height、overflow:auto 和 display:block 来完成第二个。

但是，这些似乎并没有协同工作。列大约是预期宽度的一半。

我的尝试： https://jsfiddle.net/d3y5g9fq/

<table>
<colgroup>
  <col style="width: 30%">
  <col style="width: 50%">
  <col style="width: 20%">
</colgroup>
<thead>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

table 
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;

【参考方案1】：

如果您将列宽从百分比更改为视口宽度 (vw)，它应该可以按预期工作，但并不完全符合预期。视口大小应该根据整个视口的大小来调整它的大小，但是如果您将其包装在 div 中，width 为 70%，那么在这种情况下它将像百分比而不是 vw .

将 vw 与 100% 的父 width 一起使用：

table 
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;


p 
  background-color: blue;
  width: 100%;


table, td, th 
  text-align: center;
  border: 1px solid black;

<p>Hi! </p>
<table>
<colgroup>
  <col style="width: 30vw">
  <col style="width: 50vw">
  <col style="width: 20vw">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

将vw 与70% 的父width 一起使用：

table 
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;


p 
  background-color: blue;
  width: 100%;


table, td, th 
  text-align: center;
  border: 1px solid black;

<p>Hi! </p>
<div style="width: 70%">
<table>
<colgroup>
  <col style="width: 30vw">
  <col style="width: 50vw">
  <col style="width: 20vw">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<div>

不完全是你所期望的......为什么？在极少数情况下，vw 和 vh 无法按预期工作。我自己从来没有完全弄清楚为什么，但我猜它出于某种原因将视口误解为单个元素。

如果你想在语法上正确，你也可以使用em而不是vw，这样会得到完全相同的结果：

将 em 与 100% 的父 width 一起使用：

table 
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;


p 
  background-color: blue;
  width: 100%;


table, td, th 
  text-align: center;
  border: 1px solid black;

<p>Hi! </p>
<table>
<colgroup>
  <col style="width: 30em">
  <col style="width: 50em">
  <col style="width: 20em">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>

将em 与70% 的父width 一起使用：

table 
  table-layout: fixed;
  display: block;
  max-height: 100px;
  overflow: auto;


p 
  background-color: blue;
  width: 100%;


table, td, th 
  text-align: center;
  border: 1px solid black;

<p>Hi! </p>
<div style="width: 70%">
<table>
<colgroup>
  <col style="width: 30em">
  <col style="width: 50em">
  <col style="width: 20em">
</colgroup>
<tbody>
  <tr>
    <th>Col A</th>
    <th>Col B</th>
    <th>Col C</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<div>

【讨论】：

哇！我认为 vw 是从整个页面大小（“视口宽度”）计算出来的。我想我错了......为什么即使我将表格包装在宽度为 70% 的 div 中，这仍然有效？

我已经编辑了我的答案以进一步扩展它。如果你想在语法上正确，你可以使用em 而不是vw。在某些情况下，视口大小无法按预期工作，因此不要让这种“破碎”的情况改变您对vw 和vh 的理解。 99% 的时间，它是使用整个页面大小计算的。