html - CSS 流体和固定列

Question

我有表，例如:

<table>
 <tr>
  <td>
  </td>
  <td>
  </td>
  <td class="fixed">
  </td>
 </tr>
</table>

例如我的表格宽度是 800px。

所有前两列必须是流动的，但最后:固定...

我该怎么做？

另外，如果我的前两列非常小会怎样？如何固定到右边？ (高度也是流动的)

Answer 1

• <table>得到 table-layout: fixed ;这将允许第三列保持其固定宽度

• 该表还得到一个 max-width: 800px和 width: 100% ;它会调整大小

• 我们放置三个 <col> elements在表格内代表列；第三列使用 width: 250px 获取我们的类(class)

完整示例

table {
  table-layout: fixed;
  max-width: 800px;
  width: 100%;
}
.fixed {
  width: 250px;
}
td {
  padding: 10px;
  border: solid 1px #000;
}

<table>
  <col>
  <col>
  <col class="fixed">
        <tr>
          <td>
          </td>
          <td>
          </td>
          <td>
          </td>
        </tr>
</table>