HTML 表格 - 当表格宽度为 100% 时保持列宽比例

Question

默认 html <table> element 似乎以我想要/期望的方式直接设置列宽。当我尝试将整个表格宽度设置为 100% 时会出现问题，在这种情况下，每个合理大小的列都会对齐到总宽度的 1/n%。

这是我正在谈论的一个例子



第二张 table 看起来很糟糕。绝对不需要在第一列开始换行，尤其是当现在有更多可用空间时。

唯一的区别是第二个表设置为width:100% .当然，您可以在每一列上设置精确的像素或百分比尺寸以相对于彼此进行缩放，但这开始硬编码一些关于每列有多大的猜测工作。在这种情况下，只有查看或编辑链接的列的大小可以非常小，不需要占用任何额外的空间，而有些列可以使用更多的空间来增长，例如名称/类型可能有其他更长/更短的值。

问:我能否以某种方式保持比例列格式，同时允许整个表格的大小为可用宽度的 100%？

Demo in jsFiddle

堆栈片段中的演示

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

Answer 1

问题是 table-layout: fixed您添加到 table 的规则标记，只需将其删除。来自 w3schools :

fixed: Fixed table layout algorithm:

• The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
• Allows a browser to lay out the table faster than the automatic table layout
• The browser can begin to display the table once the first row has been received

table {
    border-collapse: collapse;
    border-spacing: 0;
    /*table-layout: fixed;*/
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>