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，并始终使用＆＃34;引用html属性值。

您还可以尝试添加：

table {
    table-layout: fixed;
}

防止浏览器根据每个单元格的内容计算每个单元格的初始宽度，并最初为它们提供相等的宽度。（高度仍将根据内容扩展。）然后使用css覆盖某些列。

Answer 2

试试这个css

table{
width:100%;
}

它有效。

包含三个单元格的表格：在纯CSS中左右自动调整大小

2 个答案: