Question

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

请仔细阅读，我将使用table-layout：fixed并指定列宽来完成第一个任务。我将在表上设置max-height，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％，它将像百分比而不是{{ 1}}。

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

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

1 个答案: