div内のtableについてOverflow:scrollの横スクロールが効かない

Question

お世話になります。
下記のようなコードでテーブルを作成してはみ出る部分をoverflow: scroll;しているのですが
横スクロールが効きません。
tdのwidth合計ははみ出すように設定しているのに勝手にtdのwidthが短くなり
overflowでスクロール設定をしてくれません。

*cssは見やすいように敢えてelement内に全て記載しております。

どなたか原因をご教示願えますでしょうか？
宜しくお願い申し上げます。

<div class="content">
  <div class="content-1" style="overflow: scroll;">
      <p>Some content</p>
 <table border="1" border-collapse="collapse">
<thead>
  <tr>
<td style="width:350px;white-space: nowrap;">XXXXXX</td>
<td style="width:250px;white-space: nowrap;">1</td>
<td style="width:250px;white-space: nowrap;">2</td>
<td style="width:250px;white-space: nowrap;">3</td>
<td style="width:250px;white-space: nowrap;">4</td>
<td style="width:250px;white-space: nowrap;">5</td>
<td style="width:250px;white-space: nowrap;">6</td>
<td style="width:250px;white-space: nowrap;">7</td>
<td style="width:250px;white-space: nowrap;">8</td>
<td style="width:250px;white-space: nowrap;">9</td>
<td style="width:250px;white-space: nowrap;">10</td>
<td style="width:250px;white-space: nowrap;">11</td>

  </tr>
</thead>


<tbody>
<tr>
<td style="width:350px;white-space: nowrap;">XXXXXXXX<br>[XXX]</td>       
<td>1234<br>201112</td>
<td>1234<br>201206</td>              
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
<td>1234<br>201212</td>
</tr>

</tbody>
</table>
</div>
</div>

Answer 1

tableタグにtable-layout: fixed;とwidthを明示的に指定して下さい。

<table border="1" border-collapse="collapse" style="table-layout: fixed;width: 100%">

Comments

[pegy]

ご回答ありがとうございます、無事解決しました！

[MasakazuFukami]

よかったです！

Answer 2

tdにmin-width(最狭幅)を指定するのはいかがでしょうか。

<td style="min-width:350px;width:350px;white-space: nowrap;">XXXXXX</td>
<td style="min-width:250px;width:250px;white-space: nowrap;">1</td>
<td style="min-width:250px;width:250px;white-space: nowrap;">2</td>
.
.
.

Comments

[pegy]

ご回答ありがとうございます、ご指摘の方法でもいけました！