Question

我有一个带有滚动tbody的工作表，使用带有以下内容的css。

＆＃13;

tbody{
  overflow:auto;
}

thread > tr, tbody{
  display:block;
}

＆＃13;

<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

＆＃13;

我很高兴。

但是在其他更复杂的表上，我必须使用tbody进行特定格式化以获得所需的效果。

我遇到的问题是上面的CSS适用于我所有的表格，我只想在这个特定的表格中使用它。

我知道这意味着我需要上课，但我已经尝试过了;

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

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

显然在表格中指定了一个类=＆＃34; tbody-scroll＆＃34;，并且它的行为方式不同，它显示整个表而不是防止溢出并转到滚动条。

如何使用所有这些设置创建另一个tbody实例，以允许滚动而不影响＆＃39;默认＆＃39; 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>

使用tbody的新css在表中创建可滚动的tbody

1 个答案: