使用表格布局更改表格的列宽：用 CSS 修复答案

【问题标题】：Change column width of table with table-layout: fixed with CSS使用表格布局更改表格的列宽：用 CSS 修复
【发布时间】：2015-08-06 23:43:18
【问题描述】：

我有这个标记

<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 来演示：table layout example

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

谢谢。愚蠢的疏忽。感谢第二双眼睛！

【解决方案2】：

你的一行是 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>

Best.(screen)resolution.ever.

【讨论】：

但是@Eraph 应该可以满足您的需求。
呃！可怕的疏忽！谢谢！ p.s.抱歉...我在 JSFiddle 中发现了那个错字，但在上面的帖子中没有！ :)
哦，我知道那个游戏；）有什么帮助！