ワードプレス表作成方法

推奨：スクロール表作成手順

ステップ1

まずこれを、cssに追加

ステップ2

作成した表のtableタグを

<div class="scrollable-table">

のdivタグで囲む

２軍の方法↓↓

スクロール付の表を作成するとき

まず、functions.phpにコードを追加

//横スクロールレスポンシブテーブル用の要素の追加
add_filter(‘the_content’, function ($the_content) {
$the_content = preg_replace(‘/<table/i’, ‘<div class=”scrollable-table”><table’, $the_content);
$the_content = preg_replace(‘/<\/table>/i’, ‘</table></div>’, $the_content);
return $the_content;
});

次にstyle.cssにスタイルを追加

.scrollable-table table{
border-collapse: collapse;
margin: 1em 0;
max-width: 100%;
}

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

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

.scrollable-table {
overflow-x: auto;
margin-bottom: 1em;
}

１行目を見出しに

参考
ttps://nelog.jp/excel-table-to-wordpress
ttps://nelog.jp/scrollable-table