HTML固定幅テーブル、列のサイズが変更されない

Question

固定幅400pxのdivがあります。 div内に400pxより大きいテーブルがあるので、divをスクロールします。それはうまく動作します。私は細胞の幅を変更することはできません。私はセル2を200ピクセル幅にする必要があります。

<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>

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

Answer 2

あなた<th>要素にnowrap属性を追加します。詳細情報について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>