使用 tbody 的新 css 在表中创建可滚动的 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 分配了 class="tbody-scroll"，但它的行为方式不同，它显示整个表格而不是防止溢出并转到滚动条。

如何使用所有这些设置创建另一个 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>