テーブルを横スクロールする方法
こんな感じの、横スクロールするテーブルが作れます。
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
---|---|---|---|---|
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
CSS を使うパターン
テーブルのhtml全体を<div class="table-wrap">〜</div>で囲み
<div class="table-wrap">
<table class="table">
<tr>
<th>サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th>サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th>サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
</table>
</div>
cssには以下のように設定する
.table-wrap {
overflow-x: scroll;
}
CSSを使わないパターン
もしくは、cssなしで直接書き込む
<div class="table-wrap" style="overflow-x: scroll;">
テーブル
</div>
ワードプレスの追加CSSよりも、こちらのようにhtmlに直接書き込んだ方が優先されるので、一部の記事だけ横スクロールしたい場合はこちらがおすすめです。
コード管理的には全然良くないんですけどね。
ヘッダーセルだけ固定してスクロールする方法
横方向にセルを固定
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
---|---|---|---|
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
サンプルテキスト | これはサンプルテキストです。 | これはサンプルテキストです。 | これはサンプルテキストです。 |
<div class="table-wrap" style="overflow-x: scroll;">
<table class="table" style="width: 1200px;">
<tbody>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
<tr>
<th style="position: sticky; left: 0;">サンプルテキスト</th>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
<td>これはサンプルテキストです。</td>
</tr>
</tbody>
</table>
</div>
ヘッダー行(th)に、style="position: sticky; left: 0;"をつけて記載します。
縦スクロールの場合もできるので記載する予定なのですが、
ちょっと横幅が合わなくて、うまくいかないことが多いので少々お待ち下さい。