用一个新的css tbody在表格中创建一个可滚动的tbody

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-scroll, tbody{ 
    overflow:auto; 
} 

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

，显然分配TBODY在表中有一类=“TBODY滚动”，它不会以同样的方式表现，它显示了整个表，而不是防止溢出，去一个滚动条。

如何创建具有所有这些设置的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>