CSS 流动和固定列

Question

我有table，例如：

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

例如我的 table 宽度是 800px。

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

我该怎么做？

另外，如果我的前两列很小会怎样？如何固定到右边？（高度也是流动的）

Answer 1

<table>得到table-layout: fixed；这将允许第三列保持其固定宽度
table也得到一个max-width: 800px和width: 100%；它将调整大小
我们在table里面放三个<col> elements来代表列；第三列得到我们的 class 和 width: 250px

完整示例

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>

CSS 流动和固定列

CSS fluid and fixed columns

html

css

twitter-bootstrap

完整示例