HTML固定宽度表，列不会调整大小


HTML Fixed Width Table, columns won't resize

我有一个固定宽度为400px的div。 div中有一个大于400px的表，所以我希望div滚动。很好但我无法更改单元格的宽度。我需要单元格2的宽度为200px。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table style='border:1px solid black'>
<th>field1</th>
<th style='width:200px'>field2</th>
<th>field3</th>
<th>field4</th>
<th>field5</th>
<th>field6</th>
<th>field7</th>
<th>field8</th>
<th>field9</th>
<th>field10</th>
<th>field11</th>
<th>field12</th>
<th>field13</th>
<th>field14</th>
<th>field15</th>
</table>

相关讨论

添加display: block。如果希望表格单元具有宽度，请从此解决方案中添加table-layout: fixed; width: 100%;。不幸的是，这不适用于您的滚动功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table style='border:1px solid black'>
<th>field1</th>
<th style='width:200px; display: block;'>field2</th>
<th>field3</th>
<th>field4</th>
<th>field5</th>
<th>field6</th>
<th>field7</th>
<th>field8</th>
<th>field9</th>
<th>field10</th>
<th>field11</th>
<th>field12</th>
<th>field13</th>
<th>field14</th>
<th>field15</th>
</table>

将nowrap属性添加到您的<th>元素。有关nowrap属性

的更多信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <table style="border: 1px solid black">
        <th>field1</th>
        <th style="width: 200px" nowrap>field2</th>
        <th>field3</th>
        <th>field4</th>
        <th>field5</th>
        <th>field6</th>
        <th>field7</th>
        <th>field8</th>
        <th>field9</th>
        <th>field10</th>
        <th>field11</th>
        <th>field12</th>
        <th>field13</th>
        <th>field14</th>
        <th>field15</th>
    </table>

相关讨论