css tbody加滚动条

在网页开发中，表格是一个常见的元素，然而如果表格的行数过多，就会导致页面冗长，影响美观。为了解决这个问题，我们可以使用CSS的tbody属性来为表格添加滚动条。 首先，在html中创建一个table元素，并加上一个class属性，方便我们在CSS中选择：

<table class="scrollable-table">
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr>
      <td>内容7</td>
      <td>内容8</td>
      <td>内容9</td>
    </tr>
    <tr>
      <td>内容10</td>
      <td>内容11</td>
      <td>内容12</td>
    </tr>
    <tr>
      <td>内容13</td>
      <td>内容14</td>
      <td>内容15</td>
    </tr>
  </tbody>
</table>

接着，在CSS中给这个table元素设定宽度和高度，同时给tbody元素添加样式，使其产生垂直滚动条：

.scrollable-table {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
}

.scrollable-table tbody {
  display: block;
}

这样就完成了表格的滚动条效果。tbody元素的display属性被设置为block，使其成为一个块级元素，由于它设置了固定高度，所以当表格行数超过这个高度时，就会出现垂直滚动条。 你可以根据自己的需要，调整表格的宽度、高度和样式，让整个页面更加美观和易于浏览。