Question

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

我有一个table我希望在columns给出固定宽度，因为我想动态显示它们。 table的宽度为100％。因此，在table中，只能显示1列或3或6等。但问题是，如果在一个场景中我只有1列，那么该表中的数据占据了整个100％table，即使我已经为列提供了固定宽度。我想要无论表格宽度如何都要固定列宽。请指导我错在哪里。以下是我一直在尝试的代码。

＆＃13;

table {
  table-layout: fixed;
  word-break: break-all;
}
table td {
  border: 1px solid;
  overflow: hidden;
}

＆＃13;

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

＆＃13;

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

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

Answer 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中的表格中的列提供固定宽度？

3 个答案: