WordPressの表が崩れる問題解決の方法

こんにちは。hacknoteのr.katoです。

今回は次のように、横長の表をWordpressで作成した際、コンテンツスペースから飛び出してしまう問題を

次の表のように横スクロール機能を付けて解決する方法の紹介をしていきます。

手順

1. cssを本文に書く
2. cssを適応しながらhtmlで表を書く

1. cssを本文に書く

次の内容を横スクロールのさせたい表のある記事の本文に入力してください。

<style>
.scroll-table table{
  border-collapse: collapse;
  margin: 1em 0;
  max-width: 100%;
}

.scroll-table th{
  background-color: #eee;
}

.scroll-table th,
.scroll-table td{
  border: solid 1px #ccc;
  padding: 3px 5px;
  white-space: nowrap;
}

.scroll-table {
  overflow-x: auto;
  margin-bottom: 1em;
}
</style>

2. cssを適応しながらhtmlで表を書く

次のように、 <div class="scroll-table"> </div> でtableタグを囲ってあげます。

<div class="scroll-table">
<table>
<thead>
<tr>
<th style="text-align:center">1</th>
<th style="text-align:center">2</th>
<th style="text-align:center">3</th>
<th style="text-align:center">4</th>
<th style="text-align:center">5</th>
<th style="text-align:center">6</th>
<th style="text-align:center">7</th>
<th style="text-align:center">8</th>
<th style="text-align:center">9</th>
<th style="text-align:center">10</th>
<th style="text-align:center">11</th>
<th style="text-align:center">12</th>
<th style="text-align:center">13</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><strong>111111111111</strong></td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
<td style="text-align:center">111111111111</td>
</tr>
<tr>
<td style="text-align:center"><strong>222222222222</strong></td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
<td style="text-align:center">222222222222</td>
</tr>

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

おわりに

以上の方法で列の多すぎではみ出した表が横スクロールで見やすくなるようになります。