html - 使列默认占用最少的空间 - Foundation Responsive Tables

Question

我正在使用 Foundation 和 responsive tables .我有一个包含三列的表。默认情况下，每列占用相同的空间量。

我的第一列和最后一列的文本量很少，我希望它们只占用正确显示文本所需的空间(在一行中)。我希望中间的列占用其他空间，因为它的文本量最大。

我尝试将第一列和最后一列的宽度更改为固定宽度，但这不会影响列。

表格代码:

<table id="tt" class="responsive">
  <thead>
   <tr>
     <th>Name</th>
     <th>Comment</th>
     <th>Listed</th>
   </tr>
</thead>
    <tbody>
   <tr>
     <td>name</td>
     <td>comment</td>
     <td>now</td>
</tbody>
</table>

Answer 1

诀窍是将表格设置为使用固定布局:table-layout: fixed; - 你可以为第一列和最后一列设置固定宽度，而中间一列占据其余部分空间。

CodePen link

HTML 示例

<table class="foo responsive">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>This is my longest Item 1</td>
      <td>Item 1</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>This is my longest Item 2</td>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td>This is my longest Item 3</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

CSS 示例

table.foo {
  width: 100%;
  table-layout: fixed;
}
table.foo td:nth-child(1), table.foo th:nth-child(1) {
  width: 150px;
}
table.foo td:nth-child(3), table.foo th:nth-child(3) {
  width: 150px;
}