使用表格布局更改表格的列寬：使用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" />