如何在HTML表格中为列指定固定宽度？

Question

如何在HTML表格中为列指定固定宽度？

3

请勿将其标记为重复，直到您阅读完整个问题。

我有一个表格，在其中希望给列设置固定宽度，因为我想要动态显示它们。表格的宽度为100%。因此，在该表格中，只能显示1列或3列或6列等。但问题是，如果在某种情况下只有1列，则该表格中的数据将占用整个100%的表格，即使我已经为列指定了固定宽度。我希望列宽始终固定，不受表格宽度影响。请指导我错在哪里。以下是我一直在尝试的代码。

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>

- sTg

你不需要使用表格布局，只需使用带有float: left的div即可，因为你已经有了固定的宽度。 - Mr_Green

@Mr_Green：但问题是，即使我已经给定了100px或50px等固定宽度，数据仍占据整个表格的100%。 - sTg

这是因为您正在使用表格。在这里不需要表格布局。 - Mr_Green

@Shirish：你遇到了表格宽度“100%”的问题。你可以使用固定宽度（即400像素）来解决这个问题，而不是使用百分比。 - Sayed Rafeeq

1

这些宽度是相对于彼此计算的。因此，100、50和50表示第二个和第三个宽度是第一个的一半。例如，28、14和14将得到相同的结果，切换到％或pt等也没有关系（使用浮点值或table_width：100％时似乎存在一些舍入误差，但仅此而已）。所有列组合起来总是填满整个表的宽度，这就是表格设计的行为方式。 - myfunkyside

@Shirish：你可以像这样使用CSS属性 **:nth-child(n)**。 - Raeesh Alam

3个回答

0

这里有一个稍微不同的方法。在这个例子中，它将采用自动宽度表格，然后固定宽度和列宽。我发现这对于我想要过滤而不改变表格大小的自动宽度表格非常有用。

此示例利用了格式良好的表格上的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','');
    });
}

- mistajolly

0

以下是完整代码。

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

- user5093161

从表格中删除一列会使其他单元格占据整个宽度。不起作用，兄弟。 - sTg

请告诉我您的完整问题，您想要实现什么？ - user5093161

根据你上面的代码，如果我删除任何一列，其他两个td的宽度不应该调整为表格的宽度。 - sTg

如果您删除了一列，您也需要删除其对应的行。 - user5093161

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user5914004 · Accepted Answer

在表格末尾添加隐藏列。

表格将会是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>