如何在 HTML 中为表格内的列提供固定宽度？答案

【问题标题】：How to give fixed width for the columns inside table in HTML?如何在 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 width="100%" cellspacing='0' cellpadding='0'>
  <col width="100px" />
  <col width="50px" />
  <col width="50px" />

  <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%，仅此而已）。所有组合的列将始终填充整个表格，这正是表格的设计方式。

标签： css html html-table column-width

【解决方案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','');
    });
}

【讨论】：