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

Question

我正在尝试创建一个 table 具有固定的列宽和固定的最大高度，滚动超过最大高度。

四处阅读，我会使用 table-layout:fixed 并指定列宽来完成第一个任务。我会在 table 上设置最大高度、overflow:auto 和 display:block 来完成第二个。

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

<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;
}

Answer 1

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

使用 vw 与父级 width 的 100%：

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，父级 width 为 70%：

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 与父级 width 的 100%：

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，父级 width 为 70%：

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>

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

CSS table with fixed column widths and max height

css

html-table

css-tables