我有一个带有滚动 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-scroll”,并且它的行为方式不同,它显示整个表而不是防止溢出并转到滚动条。
如何创建另一个包含所有这些设置的 tbody 实例以允许滚动而不影响“默认”tbody 设置?
最佳答案
只是为了向您展示适用于您的情况的建议解决方案:
#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>
关于html - 使用 tbody 的新 css 在表中创建可滚动的 tbody,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43542675/