使 Column 默认占用最少的 space - Foundation Responsive Tables

Question

我在 responsive tables 中使用 Foundation。我有一个包含三列的 table。默认情况下，每列采用相同数量的 space.

我的第一列和最后一列的文本量很少，我希望它们只使用正确显示文本所需的 space（在一行中）。我希望中间的列占另一列 space，因为它的文本量最大。

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

table代码：

<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 设置为使用固定布局：table-layout: fixed; - 您可以为第一列和最后一列设置固定宽度，而中间一列占据 space.

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

使 Column 默认占用最少的 space - Foundation Responsive Tables

Make Column take the least amount of space by default - Foundation Responsive Tables

html

css

responsive-design

zurb-foundation