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

【问题标题】：HTML Fixed Width Table, columns won't resizeHTML 固定宽度表，列不会调整大小
【发布时间】：2017-09-04 22:01:12
【问题描述】：

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

<div style='width:400px;overflow:scroll'>
<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>
</div>

【问题讨论】：

是单元格中的文本阻止它们变小。

标签： html html-table cell tablelayout fixed-width

【解决方案1】：

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

<div style='width:400px;overflow:scroll'>
<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>
</div>

【讨论】：

【解决方案2】：

将nowrap 属性添加到您的<th> 元素。更多关于nowrap属性的信息

<div style="width: 400px; overflow: scroll">
    <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>
</div>

【讨论】：

这很好用，谢谢。虽然我更喜欢下面使用 display:block 的答案，但这也很好。