Question

我有一个非常大的表，我需要包含在原型中。如何更改列宽？我使用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;}

Answer 1

尝试使用＆lt; col＆gt; width属性：

实施例

<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

Answer 2

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

像这样：

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

Answer 3

设置table-layout属性，如下所示：

table
{
table-layout:fixed;
}

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

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

Answer 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;}

如何更改表格的列宽？

4 个答案: