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

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>

最佳。（画面）resolution.ever。

Answer 2

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

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

使用table-layout更改表的列宽：使用CSS修复

2 个答案: