【Bootstrap】ストライプ/ボーダーなしテーブルの作り方：HTML・CSSで簡単カスタマイズ
2024-06-30
Bootstrapでストライプ/ボーダーなしテーブルを作成する方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap テーブル</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHTTwrAZ3uK9F9gXg2xJ3y9D9dnC8yYxY+W5qTwhb50x4K+YQ6gEIGg4Q" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>ボーダーなしテーブル</h1>
<table class="table table-borderless">
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn30735e/PQjIC4vKq+xOLx5wOLOLP5d681bT9rN2vF063bJ5xI73kU5xQ1Y" crossorigin="anonymous"></script>
</body>
</html>
CSS
/* 不要な場合 */
.table-striped {
background-color: transparent !important;
}
説明
- HTML
tableタグにtable-borderlessクラスを追加することで、テーブル全体のボーダーを非表示にします。theadとtbodyタグを使用して、表の見出しと本文を構造化します。trタグを使用して、各行を表します。
- CSS
補足
- このコードは Bootstrap 5.2.0-beta1 で動作確認済みです。
- テーブルのレスポンシブ化など、他の Bootstrap 機能と併用することもできます。
- より高度なカスタマイズを行う場合は、Bootstrap の公式ドキュメントを参照してください。
Bootstrapでストライプ/ボーダーなしテーブルを作成するサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap テーブル</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHTTwrAZ3uK9F9gX2xJ3y9D9dnC8yYxY+W5qTwhb50x4K+YQ6gEIGg4Q" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>ボーダーなしテーブル</h1>
<table class="table table-borderless">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tシャツ</td>
<td>¥1,500</td>
<td>30</td>
</tr>
<tr>
<td>ジーパン</td>
<td>¥5,000</td>
<td>20</td>
</tr>
<tr>
<td>靴</td>
<td>¥8,000</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn30735e/PQjIC4vKq+xOLx5wOLOLP5d681bT9rN2vF063bJ5xI73kU5xQ1Y" crossorigin="anonymous"></script>
</body>
</html>
このコードは、以下の点で前の例と異なっています。
tableタグにtable-stripedクラスが追加されていますが、table-borderlessクラスも追加されているため、ストライプ模様は表示されません。- 表の見出しと本文のセルに、具体的なデータが入力されています。
結果
このコードを実行すると、以下のようになります。
- このコードはあくまでも一例であり、必要に応じて自由にカスタマイズできます。
- Bootstrapには、他にも様々なテーブルスタイルが用意されています。詳しくは、Bootstrapの公式ドキュメントを参照してください。
Bootstrapでストライプ/ボーダーなしテーブルを作成するその他の方法
HTMLを変更せずに、CSSのみでストライプ/ボーダーなしテーブルを作成することもできます。
.table-striped {
background-color: transparent !important;
}
.table-borderless {
border: none !important;
}
.table-borderless th,
.table-borderless td {
border: none !important;
}
- このCSSは、
table-stripedクラスとtable-borderlessクラスのスタイルを上書きします。 background-color: transparent !important;で、ストライプ模様の背景色を透明にします。border: none !important;で、テーブル全体のボーダーと、各セルのボーダーを非表示にします。
利点
- HTMLを変更する必要がないため、既存のコードを簡単に修正できます。
- 特定のテーブルのみスタイルを変更したい場合に便利です。
欠点
- すべてのテーブルにこのCSSが適用されてしまうため、他のテーブルのスタイルに影響を与えてしまう可能性があります。
!importantを使用しているため、メンテナンス性が悪くなる可能性があります。
JavaScript例
const tables = document.querySelectorAll('.table');
for (const table of tables) {
table.classList.add('table-borderless');
const rows = table.querySelectorAll('tbody tr');
for (let i = 0; i < rows.length; i++) {
if (i % 2 === 0) {
rows[i].classList.add('table-striped-row');
}
}
}
- このJavaScriptは、ページ内のすべての
table要素に対して処理を実行します。 table.classList.add('table-borderless');で、テーブル全体のボーダーを非表示にします。rows = table.querySelectorAll('tbody tr');で、テーブル本文のすべての行を取得します。if (i % 2 === 0) { rows[i].classList.add('table-striped-row'); }で、偶数行にtable-striped-rowクラスを追加し、ストライプ模様を作成します。
- 動的にストライプ/ボーダーなしテーブルを作成できるため、柔軟性があります。
- 特定の条件に基づいてストライプ/ボーダーなしテーブルを作成できます。
- JavaScriptを使用する必要があるため、難易度が高くなります。
- 複雑なロジックが必要な場合、コードが冗長になってしまう可能性があります。
上記以外にも、様々な方法でBootstrapでストライプ/ボーダーなしテーブルを作成することができます。
最適な方法は、状況や要件によって異なります。
html css twitter-bootstrap
