html - 使用 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 分配了一个类 =“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>