1

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
CheeseFlavored
  • 1,922
  • 1
  • 21
  • 28

2 Answers2

4

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>
Community
  • 1
  • 1
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
2

Add nowrap attribute to your <th> element. More info aboutnowrap Attribute

<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>
VTr
  • 718
  • 3
  • 11