HTML Fixed Width Table, columns won't resize

Question

I have a div with a fixed width of 400px. There's a table inside the div that is larger than 400px, so I want the div to scroll. That works fine. but I can't change the width of the cells. I need cell 2 to be 200px wide.

<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

Add display: block. If you want table-cells to have widths, add table-layout: fixed; width: 100%; from this solution. Unfortunately, that doesn't work with your scroll functionality.

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