1. ホーム
  2. html

[解決済み] 同じ<table>の中に複数の<tbody>を入れることはできますか?

2022-03-16 15:57:30

質問

複数の <tbody> タグが同じ <table> ? もしそうなら、どのようなシナリオで複数の <tbody> タグを使用できますか?

どのように解決するのですか?

例えば、私はこのように、データのグループをより簡単にスタイル付けするために使っています。

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }
<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

ここで例を見ることができます . これは新しいブラウザでしか動作しませんが、私の現在のアプリケーションでサポートしているもので、JavaScriptなどでグループ化を使用することができます。主なものは、データをより読みやすくするために、行を視覚的にグループ化する便利な方法だということです。もちろん他の使い方もありますが、適用できる例としては、この方法が私にとって最も一般的なものです。