Question

我正在使用基础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;
}

默认情况下，使列占用最少的空间 - 基础响应表

1 个答案: