テーブルのセルの長さによってクラスを付与、divで囲ってスクロールにする方法。
カテゴリ：WEB制作
タグ：
テーブルの列数によっては横にスクロールさせたいときがあるかと思います。
また、ワードプレスなどを使用していると表を作成した際に列数が多くなるとレイアウトが崩れたり見づらくなるということもあります。
今回はテーブルのセルの長さによってクラスを付与、divで囲ってスクロールにする方法を紹介します。
コードの紹介
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.table_wrap{
max-width: 800px;
margin: 50px auto 0;
}
.table_wrap > *{
margin-bottom: 30px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
}
.scrollable_table_wrap{
overflow-x: scroll
}
.scrollable_table{
width: 1300px;
}
</style>
<title>Table with Scrollable Class</title>
</head>
<body>
<div class="table_wrap">
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>MacBook PRO</td>
<td>¥396,000</td>
</tr>
<tr>
<td>Mac PRO</td>
<td>¥566,000</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">商品名</th>
<th>価格</th>
<th>販売店舗</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートパソコン</td>
<td>MacBook PRO</td>
<td>¥396,000</td>
<td>東京都</td>
</tr>
<tr>
<td>デスクトップ</td>
<td>Mac PRO</td>
<td>¥566,000</td>
<td>千葉県</td>
</tr>
</tbody>
</table>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 結合される前のテーブルのtheadとtbodyの列数を計算
function calculateColumnCount(row) {
let totalColumns = 0;
row.querySelectorAll('th, td').forEach(cell => {
totalColumns += cell.colSpan; // colspan を考慮
});
return totalColumns;
}
// 全てのテーブルを取得
const tables = document.querySelectorAll('table');
tables.forEach(table => {
const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
// theadまたはtbodyのどちらかで列数が規定値以上の場合、クラスを追加
const theadColumns = calculateColumnCount(thead.querySelector('tr'));
const tbodyColumns = calculateColumnCount(tbody.querySelector('tr'));
// 列数が3以上なら横スクロールを有効にするクラスを追加
if (theadColumns >= 3 || tbodyColumns >= 3) {
table.classList.add('scrollable_table');
table.outerHTML = '<div class="scrollable_table_wrap">' + table.outerHTML + "</div>";
}
});
});
</script>
</body>
</html>
コードの解説
HTMLの解説は割愛します。
CSSの解説
tableタグを内包するdivと、tableタグのcssは以下です。
.table_wrap{
max-width: 800px;
margin: 50px auto 0;
}
.table_wrap > *{
margin-bottom: 30px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 8px;
}
カラムが3以上になるとtableタグに『.scrollable_table』のクラスが付与されます。
こちらには固定の横幅を指定します。
また、スクロールバーにするためにtableタグをdivで囲み、『overflow-x: scroll』で横スクロールを有効にします。
.scrollable_table_wrap{
overflow-x: scroll
}
.scrollable_table{
width: 1300px;
}
Javascriptの解説
以下で、読み込み完了後に実行させます。
document.addEventListener("DOMContentLoaded", function() {
});
テーブルのth、tdタグは結合して使用する場合がありますので、結合される前の列数を取得する関数を設定します。
// 結合される前のテーブルのtheadとtbodyの列数を計算
function calculateColumnCount(row) {
let totalColumns = 0;
row.querySelectorAll('th, td').forEach(cell => {
totalColumns += cell.colSpan; // colspan を考慮
});
return totalColumns;
}
対象となるセレクタを設定します。以下は全てのtableタグに対して使用しています。
// 全てのテーブルを取得
const tables = document.querySelectorAll('table');
thead、tbodyのセレクタを設定します。
// theadまたはtbodyのどちらかで列数が規定値以上の場合、クラスを追加
const theadColumns = calculateColumnCount(thead.querySelector('tr'));
const tbodyColumns = calculateColumnCount(tbody.querySelector('tr'));
以下で分岐を行います。
列数が3以上のtableには『table.classList.add(‘scrollable_table’);』で『scrollable_table』というクラス名を付与します。
さらに、tableタグを『scrollable_table_wrap』というクラス名で囲みます。
// 列数が3以上なら横スクロールを有効にするクラスを追加
if (theadColumns >= 3 || tbodyColumns >= 3) {
table.classList.add('scrollable_table');
table.outerHTML = '<div class="scrollable_table_wrap">' + table.outerHTML + "</div>";
}
これで、横スクロールに必要なHTMLタグが生成されました。
outerHTMLのところを編集すれば括るタグは自由に設定できますので複雑なレイアウトにも対応できるでしょう。
列数の分岐も複数の条件で処理を流してあげれば列によって細かく分けることができます。
まとめ
以上、『テーブルのセルの長さによってクラスを付与、divで囲ってスクロールにする方法。』でした。今回の方法は特にCMSでのコラム投稿などの際にテーブルを多用する場合などに特に活用できます。
ぜひ、お試しください。
