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

Question

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

阅读后，我会使用 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;
}

Answer 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>