テーブル内にスクロール可能なtbodyを作成し、tbodyという新しいCSSで作成する

Question

私は、スクロールするtbodyを持つ作業テーブルを、以下の中にcssを使用して作成しました。

tbody{ 
 
    overflow:auto; 
 
} 
 

 
thread > tr, tbody{ 
 
    display:block; 
 
}

<table> 
 
    <thread> 
 
    <tr> 
 
     <td>Item</td> 
 
     <td>SerialNm</td> 
 
    </tr> 
 
    </thread> 
 
    
 
    <tbody style="height:50px"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    </tbody> 
 
</table

私はこれで満足しています。

しかし、他のより複雑なテーブルでは、必要な影響を得るために特定のフォーマットにtbodyを使用する必要があります。

私が持っている問題は、上記のCSSをすべてのテーブルのどこにでも適用でき、私はこの特定のテーブル内のtbodyにのみ必要なことです。

私はクラスを作る必要があることを知っていますが、私はこれを試しました。クラス=「TBODYスクロール」を持って、それは同じように動作していないテーブルでのtbodyを割り当て

.tbody-scroll, tbody{ 
    overflow:auto; 
} 

thread > tr, tbody-scroll{ 
    display:block; 
} 

と、明らかに、それは代わりにオーバーフローを防止しに行くのテーブル全体を表示スクロール・バー。

「default」tbody設定に影響を与えずにスクロールできるようにするには、これらすべての設定でtbodyの別のインスタンスを作成するにはどうすればよいですか？

Answer 1

ただ、あなたに提案された解決策を示すためには、自分の状況に適用される：

#specificTable tbody{ 
 
    overflow:auto; 
 
} 
 

 
#specificTable thread > tr, tbody{ 
 
    display:block; 
 
}

<p> Specific table example</p> 
 
<table id="specificTable"> 
 
    <thread> 
 
    <tr> 
 
     <td>Item</td> 
 
     <td>SerialNm</td> 
 
    </tr> 
 
    </thread> 
 
    
 
    <tbody style="height:50px"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p> Other table example</p> 
 
<table id="otherTable"> 
 
    <thread> 
 
    <tr> 
 
     <td>Item</td> 
 
     <td>SerialNm</td> 
 
    </tr> 
 
    </thread> 
 
    
 
    <tbody style="height:50px"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>12345</td> 
 
    </tr> 
 
    </tbody> 
 
</table>