如何在 HTML 中为表格内的列提供固定宽度？
Posted
技术标签:
【中文标题】如何在 HTML 中为表格内的列提供固定宽度？【英文标题】：How to give fixed width for the columns inside table in HTML? 【发布时间】：2017-03-30 05:23:03 【问题描述】：P.S : 请在阅读整个问题之前不要将其标记为重复
我有一个table，我想为columns 提供固定宽度，因为我想动态显示它们。 table 的宽度为 100%。所以在那table中，只能显示1列或3或6等。但问题是，如果在一个场景中我只有 1 列，那么该表中的数据占据整个 100% table，即使我已经为该列指定了固定宽度。无论表格宽度如何，我都希望列宽固定。请指导我哪里错了。下面是我一直在尝试的代码。
table
table-layout: fixed;
word-break: break-all;
table td
border: 1px solid;
overflow: hidden;
<table cellspacing='0' cellpadding='0'>
<col />
<col />
<col />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</table>【问题讨论】：
您不需要表格布局。只需将 div 与 float:left 一起使用。因为你有固定的宽度。 @Mr_Green ：但问题是数据占据了整个 100% 的表格，即使我给出了 100 像素或 50 像素左右的固定宽度 这是因为您使用的是表。这里不需要表格布局。 @Shirish：您遇到了表格宽度“100%”的问题。您可以使用固定宽度（即 400 像素）而不是使用百分比来解决此问题。 这些宽度是相对于彼此计算的。所以100、50 和50 表示第二个和第三个是第一个宽度的一半。例如28、14 和14 将给出相同的结果，将px 切换为% 或pt 或任何无关紧要的东西（使用浮点值时似乎存在一些舍入错误或table_width:100%，仅此而已）。所有组合的列将始终填充整个表格，这正是表格的设计方式。
【参考方案1】：
在表格末尾添加隐藏列。
表格将是 100% 宽度，并且调整隐藏列的大小比调整页面大小。
代码示例：
table
table-layout: fixed;
word-break: break-all;
border-collapse: collapse;
width:100%;
td
height:50px;
border: 1px solid;
th
height:50px;
border: 1px solid;
.F
width:100%;
border:none;
border-left:1px solid;
<table>
<col width='200px' />
<col width='100px' />
<col width='50px' />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th class='F'></th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
<td class='F'></td>
</tr>
</table>【讨论】：
我为你的努力投了赞成票。但是，如果我使用 cols 来定义列的宽度，它将不起作用。试过了。 您可以使用 cols 定义宽度。如果您在表格末尾留下隐藏列，它可以工作（经过测试）。 我使用 cols 尝试了相同的代码，但对我来说它不起作用。您能否修改您的答案。如果成功了，我会接受你的回答。 如果使用 cols，您必须从 CSS 中删除宽度参数。完成，代码更新 接受 :).. 谢谢哥们 :)【参考方案2】：这是完整的代码。
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
border: 1px solid black;
table
border-collapse: collapse;
width: 100%;
th
height: 50px;
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
</body>
</html>
【讨论】：
从表中删除一列会使另一个 td 占据整个宽度。不工作的兄弟。 请告诉我你的完整问题你想达到什么目的？ 根据您上面的代码，如果我要删除任何列，其他 2 个 tds 的宽度不应调整为表格的宽度。 如果你删除列，你也需要删除它的行。【参考方案3】：这是一种略有不同的方法。在此示例中，它将采用自动宽度表，然后固定宽度和列宽。我发现这很有用，我有一个自动宽度表，我想在不调整表大小的情况下进行过滤。
此示例在格式良好的表格中使用col 和th 元素。
添加了fixed类的使用，方便重置表格。
/*jQuery - mistajolly - fix table widths*/
var table = $(this);
if(!table.hasClass('fixed'))
table.width(table.outerWidth(true));
table.addClass('fixed');
var cols = table.find('col');
table.find('th').each(function(index)
$(cols[index]).width($(this).outerWidth(true)).addClass('fixed');
);
/* Reset and remove fixed widths */
if(table.hasClass('fixed'))
table.removeClass('fixed').css('width','');
table.find('.fixed').each(function(index)
$(this).removeClass('fixed').css('width','');
);
【讨论】：
以上是关于如何在 HTML 中为表格内的列提供固定宽度？的主要内容，如果未能解决你的问题，请参考以下文章