禁止更改 html 表格中的宽度答案

【问题标题】：Disable changing of width in html table禁止更改 html 表格中的宽度
【发布时间】：2014-01-09 23:34:16
【问题描述】：

我正在尝试创建一个“固定宽度”表，但只要列中的数据大于其余数据，它就会以某种方式改变列宽。

例如，下表更改了最后一个数字的宽度，即 10。

<table>
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td rowspan="2" colspan="2">7</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td colspan="2">9</td> 
        <td>10</td>
    </tr>
</table>

这是我的 CSS：

table {
    border: 1px solid;
    width: 400px;
    height: 300px;
}

【问题讨论】：

标签： html css html-table fixed-width

【解决方案1】：

CSS中有2种表格算法，由table-layout属性触发：

table-layout:fixed 将尽可能根据作者（您）的需要调整单元格宽度
table-layout:auto（默认值）会根据内容调整单元格宽度。

CSS

  table {
    table-layout: fixed;
    width: 400px;
    height: 300px;
    border: 1px solid;
  }

这是一个小提琴：http://jsfiddle.net/tk4J8/

【讨论】：

谢谢，这就是我要找的东西 ;)

【解决方案2】：

不要使用column-width 来指定表格列的宽度——它是一个suggested optimal guideline 用于浏览器，并不是真正用于固定宽度布局。请改用colgroups。

删除样式表中的column-width 样式，并将其添加到table 任何tr 或td 标签之前的标签：

<colgroup>
    <col span="1"></col>
    <col span="1"></col>
    <col span="1"></col>
    <col span="1"></col>
</colgroup>

并将其添加到您的样式表中：

colgroup col {
    width: 100px;
}

jsFiddle。

这是Mozilla documentation for it。

【讨论】：