css - 包含三个单元格的表 : auto-resize left and right in pure CSS

Question

我有三个连续的实体，目前我使用表格来显示它们:

<table>
  <tbody>
    <tr>
      <td id='td1'>some text</td>
      <td id='td2' style='width:600px;'>some text</td>
      <td id='td3'>some text</td>
    </tr>
  </tbody>
</table>

我需要的是在浏览器调整大小时同时调整左右单元格的大小。我想知道如果没有 JS 是否可行。

我什至尝试过 CSS resize这显然在 IE 中不起作用，玩了单元格的宽度，但仍然没有成功。我完全是 CSS 的新手。

有可能吗？提前致谢。

Answer 1

无法验证，因为我在移动设备上，但你试过吗......

<table>
    <colgroup>
        <col class="first" />
        <col />
        <col class="last" />
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

然后使用 col.first 和 col.last 类通过 css 设置它们的样式。

W3C:http://www.w3.org/TR/html-markup/col.html

哦，还有，从您的 html 中删除所有的 css。内联 css 将使文档完全无法通过 css 文件进行维护。并从 td:s 中删除 ID，并始终使用 "来引用 html 属性值。

你也可以尝试添加:

table {
    table-layout: fixed;
}

防止浏览器根据单元格的内容计算每个单元格的初始宽度，并给它们初始相等的宽度。 (高度仍会根据内容扩展。)然后用 css 覆盖某些列。