如何更改表格的列宽？答案

【问题标题】：How can I change a table's column widths?如何更改表格的列宽？
【发布时间】：2014-04-25 05:51:26
【问题描述】：

我有一张非常大的桌子，我需要将其包含在原型中。如何更改列宽？我使用 CSS 的尝试没有成功。

http://jsbin.com/lebokewi/1/edit?html,css,output

CSS

table, th, tr, td {
  border: 1px solid #000;
}

#colHdr th:nth-of-type(1) {width: 100px;}
#colHdr th:nth-of-type(2) {width: 50px;}
#colHdr th:nth-of-type(3) {width: 200px;}
#colHdr th:nth-of-type(4) {width: 60px;}
#colHdr th:nth-of-type(5) {width: 80px;}

【问题讨论】：

你试过了吗：column-width:100px; -moz 列宽：100 像素； /* Firefox / -webkit-column-width:100px; / Safari 和 Chrome */ ?
谢谢，但我尝试了所有这些，但它们都不起作用。

标签： javascript html css html-table

【解决方案1】：

尝试使用宽度属性：

示例

<table>
    <col width="130">
    <col width="80">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>

参考
w3schools.com

【讨论】：

是的，我确实尝试过这个解决方案，但没有奏效。谢谢。

【解决方案2】：

如果你直接在 html 中设置样式，th 不会改变所有列的宽度？

像这样：

<th style="width:30%"></th>

【讨论】：

我尝试使用更少的列，中间没有那些全宽单元格和，它对我有用
很遗憾，我无法删除任何列或合并的单元格。
实际上我再次尝试了合并单元格，似乎对我有用：S 你只需要尽量不超过 100%。

【解决方案3】：

像这样设置你的表格布局属性：

table
{
table-layout:fixed;
}

然后在你的第一行，定义你的宽度：

<tr>
  <th width="5%">Hey</th><th width="95%">Hello, big row</th>
</tr>

【讨论】：

【解决方案4】：

我想通了。需要定义表格宽度。

table {
  width: 3000px;
}

table, th, tr, td {
  border: 1px solid #000;
}

#colHdr td:nth-of-type(1) {width: 100px; color: green;}
#colHdr td:nth-of-type(2) {width: 250px; color:blue}
#colHdr td:nth-of-type(3) {width: 80px; color: orange}
#colHdr td:nth-of-type(4) {width: 175px; color: purple}
#colHdr td:nth-of-type(5) {width: 175px; color:red;}

【讨论】：

为什么投反对票？弄清楚宽度没有定义解决了我的问题。这绝对可以帮助那些没有意识到他们必须定义表格的宽度属性的人。