正文

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

 2023-03-06  28

关键词：

【中文标题】具有固定列宽和最大高度的 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% 的时间，它是使用整个页面大小计算的。

CSS - tr上的固定高度和桌子上的固定高度？

...le?【发布时间】：2016-05-0120:00:54【问题描述】：我需要有具有固定高度行的表格，并且该表格本身必须具有固定高度。例如，所有行的高度为8像素，表格的高度为400像素。如果行数少于表格的总高度，那么表格的剩余部分应该... 查看详情

css网格可变列宽和换行

...续我已经设法让列显示和换行，但只有如果我为列定义了固定宽度https://stackblitz.com/edit/angular4-dxkvmt如查看详情

怎样使word表格的宽度高度固定不变

...定高度”，输入或调整高度值，将“行高值是”调整为“固定值”。3、单击“列”选项卡，勾选“指定宽度”，输入或调整宽度值，单击“确定”按钮。参考技术A1、选中整个表格。右键－“表格属性”2、在表格属性对话框，... 查看详情

怎么设置dialog的宽和高度

参考技术A方法一：选择表，然后右键单击并选择表格属性，你会看到列和行属性，表，其中有可以精确设置宽度设置。方法二：拖动鼠标来调整的时间列宽，按住ALT键，就可以精确地调整列宽查看详情

word中如何固定表格的宽和高

要固定表格的宽和高，可以执行如下操作步骤：1．选取整个表格，单击鼠标右键，在随即弹出的快捷菜单中执行“表格属性”命令，打开“表格属性”对话框。2．打开“表格”选项卡，在“尺寸”选项区域中，选中“指定宽度... 查看详情

HTML 表格 - 固定和多变量列宽

...度的50%）。一些列包含固定大小的按钮，因此这些列应该具有固定大小，例如100像素。有些列中有文本，所以我希望这些列具有可变的列宽。例如：Column1:20%of(tablew 查看详情

如何制作具有固定列宽的 chrome 尊重表

】如何制作具有固定列宽的chrome尊重表【英文标题】：Howtomakechromerespecttableswithfixedcolumnwidth【发布时间】：2014-04-1700:08:24【问题描述】：我有一个基本的自制“表格”插件，它支持水平和垂直滚动，在渲染时要固定列宽。所以我... 查看详情

如何将 html 列宽固定为其内容的最大宽度？

】如何将html列宽固定为其内容的最大宽度？【英文标题】：Howtofixanhtmlcolumnwidthtothemaxwidthofitscontent?【发布时间】：2011-11-0801:45:54【问题描述】：我正在尝试为输入表单格式化表格，如下所示。表格看起来有点像这样：Name:Timeofday... 查看详情

自动布局：具有可变高度和两个标签的表格单元格

】自动布局：具有可变高度和两个标签的表格单元格【英文标题】：Autolayout:tablecellwithvariableheightandtwolabels【发布时间】：2015-05-1716:23:30【问题描述】：我遇到了一些高级自动布局主题，需要您的帮助。我有一个简单的自定义表... 查看详情

固定行跨度和表格布局时的表格列宽

】固定行跨度和表格布局时的表格列宽【英文标题】：Tablecolumnwidthwhenhavingrowspanandtable-layoutfixe【发布时间】：2018-01-2501:42:48【问题描述】：我一直在固定我的html表格的第二列的宽度。下面是我的桌子的打印屏幕：下面是CSS代码... 查看详情

如何获得固定的表格列宽

】如何获得固定的表格列宽【英文标题】：Howtogetfixedtablecolumnswidth【发布时间】：2012-01-0216:44:28【问题描述】：如何将单个表格列固定为特定宽度，以便无论该列中有多少文本，列的宽度都保持不变？<col>标签只适用... 查看详情

如何在 CSS 中制作具有相同列宽的表格？

】如何在CSS中制作具有相同列宽的表格？【英文标题】：HowtomakeatablewithequalcolumnwidthsinCSS?【发布时间】：2014-02-2501:35:41【问题描述】：我有一个包含如下表格的文档：<table><tr><td>Word</td><td>Definition</td>&l... 查看详情

css表格固定列宽

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

具有固定标题、滚动条和动态高度的 HTML 表格

】具有固定标题、滚动条和动态高度的HTML表格【英文标题】：HTMLtablewithfixedheader,scrollbaranddynamicheight【发布时间】：2017-10-0319:34:29【问题描述】：我有一个问题已经回答了很多次，但我的要求是定制的，我想要一个HTMl表格，带... 查看详情

具有固定高度的表格单元格中的自动布局多行标签

】具有固定高度的表格单元格中的自动布局多行标签【英文标题】：Autolayoutmultilinelabelinatablecellwithfixheight【发布时间】：2014-08-1410:31:32【问题描述】：我有一个固定高度单元格的表格视图。在单元格中有3个标签；名称、地址和... 查看详情

基于内部图像宽度的灵活列宽（固定高度）

】基于内部图像宽度的灵活列宽（固定高度）【英文标题】：Flexiblecolumnwidthbasedonimagewidthinside(withfixedheight)【发布时间】：2022-01-2003:49:17【问题描述】：我使用Elementor创建了一个10列的容器。如何根据列宽固定图像高度内的图像... 查看详情

嵌套 HTML 表格的匹配表格高度

...一个例子；实际表有更多的行和列。我想使用表格，因为列宽和行高的自然重排以适应表格数据，而不必担心容器大小（查看详情

具有全宽和可变高度的 UIImageView

】具有全宽和可变高度的UIImageView【英文标题】：UIImageViewwithfullwidthandvariableheight【发布时间】：2018-10-2406:11:28【问题描述】：我正在开发一个我想要UIImageview的应用程序，例如instagram提要。我将主视图的前导和尾随空间设置为零... 查看详情