如何在HTML中为table内的列设置固定宽度？

Question

P.S ：请在阅读整个问题之前不要将其标记为重复

我有一个 table，我想给 columns 固定宽度，因为我想动态显示它们。 table 的宽度为 100%。所以在table中，只能显示1列或3或6等。但问题是，如果在我只有 1 列的情况下，table 中的数据占据了整个 100% table，即使我已经为该列指定了固定宽度。无论 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>

Answer 1

这是完整的代码。

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

Answer 2

将隐藏列添加到 table 的末尾。

Table 将是 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>

Answer 3

这里有一个稍微不同的方法。在此示例中，它将采用自动宽度 table，然后固定宽度和列宽。我发现这很有用，因为我有一个自动宽度 table，我想在不调整 table 大小的情况下进行过滤。

此示例在格式良好的 table.

上使用了 col 和 th 元素

添加了fixedclass的使用，以便table可以轻松重置。

/*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中为table内的列设置固定宽度？

How to give fixed width for the columns inside table in HTML?

html

css

html-table

column-width