使用表格布局更改表格的列宽：使用CSS固定

Question

我有这个标记

<table class="small" style="table-layout: fixed;" width="600px" cellspacing="0">
    <col style="100px" />
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="20px;"/>
    <col style="360px;" />
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:500px;" colspan="8">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:40px;" colspan="2">.</td>
      <td style="width:40px;" colspan="2">.</td>
      <td style="width:420px;" colspan="4">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:100px;" colspan="5">.</td>
      <td style="width:400px;" colspan="3" align="right">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;background:red;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:100px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;background:red;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:3600px;">.</td>
    </tr>
    <tr>
      <td style="width:200px;" colspan="6">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:200px;" colspan="6">.</td>
      <td style="width:20px;">.</td>
      <td style="width:20px;">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
    <tr>
      <td style="width:240px;" colspan="8">.</td>
      <td style="width:360px;">.</td>
    </tr>
  </table>

我正在尝试更改第一列和最后一列的宽度。 将第一列的宽度设置为100px似乎可行，但是尝试将最后一列的宽度设置为360px无效吗？

我在这里做错了什么？ 尝试了一堆东西。 设置每个单元格的宽度（上方）并设置我刚要更改的单元格的宽度（行1单元1和行4单元9）。

这是一个JSFiddle来演示： 表布局示例

Answer 1

您的其中一行说3600！

<tr>
  <td style="width:100px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;background:red;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:20px;">.</td>
  <td style="width:3600px;">.</td>
</tr>

最佳（屏幕）分辨率

Answer 2

在col样式定义中，您未指定要调整大小的属性。 它应该是：

<col style="width: 100px" />