将垂直滚轮添加到 HTML 表格答案

【问题标题】：Add vertical scroll wheel to HTML table将垂直滚轮添加到 HTML 表格
【发布时间】：2018-08-31 14:12:00
【问题描述】：

我有一个基本表格，想在标题下显示前 3 行，然后提供一个滚轮来显示剩余的 2 行。

我尝试过设置桌子的高度并在各个地方使用overflow: scroll，但无法开始工作。我不确定这个属性是否可以在表格上使用，或者是否仅用于 div。

我的代码如下，非常感谢您的帮助。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<style>

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 15px 100px;
}

</style>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>DOB</th>
            <th>Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John Smith</td>
            <td>26.01.1989</td>
            <td>john@email.com</td>
        </tr>

        <tr>
            <td>Rick Thompson</td>
            <td>15.04.1995</td>
            <td>rick@email.com</td>
        </tr>

        <tr>
            <td>Tim Bloggs</td>
            <td>03.02.2000</td>
            <td>tim@email.com</td>
        </tr>

        <tr>
            <td>Bob Roberton</td>
            <td>11.04.1985</td>
            <td>bob@email.com</td>
        </tr>

        <tr>
            <td>Joe Bishop</td>
            <td>03.02.2010</td>
            <td>joe@email.com</td>
        </tr>
    </tbody>
</table>

</body>

【问题讨论】：

可能重复：stackoverflow.com/questions/4069734/…

标签： html css scrollbar

【解决方案1】：

你必须把表格放在一个div中，然后将div的高度设置为小于你的表格和overflow-y: scroll的高度。

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 15px 100px;
}

.table-wrap {
  height: 222px;
  overflow-y: scroll;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="table-wrap">
  <table>
      <thead>
          <tr>
              <th>Name</th>
              <th>DOB</th>
              <th>Email</th>
          </tr>
      </thead>

      <tbody>
          <tr>
              <td>John Smith</td>
              <td>26.01.1989</td>
              <td>john@email.com</td>
          </tr>

          <tr>
              <td>Rick Thompson</td>
              <td>15.04.1995</td>
              <td>rick@email.com</td>
          </tr>

          <tr>
              <td>Tim Bloggs</td>
              <td>03.02.2000</td>
              <td>tim@email.com</td>
          </tr>

          <tr>
              <td>Bob Roberton</td>
              <td>11.04.1985</td>
              <td>bob@email.com</td>
          </tr>

          <tr>
              <td>Joe Bishop</td>
              <td>03.02.2010</td>
              <td>joe@email.com</td>
          </tr>
      </tbody>
  </table>
</div>
</body>

【讨论】：

【解决方案2】：

    table {
        border-collapse: collapse;
        max-height: 50px;
        overflow: auto;
    }

    th, td {
        border: 1px solid black;
        padding: 15px 100px;
    }

    <table>
    
        <thead>
    
            <tr>
                <th>Name</th>
                <th>DOB</th>
                <th>Email</th>
            </tr>
    
        </thead>
    
    
    
    
        <tbody>
    
            <tr>
                <td>John Smith</td>
                <td>26.01.1989</td>
                <td>john@email.com</td>
            </tr>
    
    
            <tr>
                <td>Rick Thompson</td>
                <td>15.04.1995</td>
                <td>rick@email.com</td>
            </tr>
    
    
            <tr>
                <td>Tim Bloggs</td>
                <td>03.02.2000</td>
                <td>tim@email.com</td>
            </tr>
    
            <tr>
                <td>Bob Roberton</td>
                <td>11.04.1985</td>
                <td>bob@email.com</td>
            </tr>
    
    
            <tr>
                <td>Joe Bishop</td>
                <td>03.02.2010</td>
                <td>joe@email.com</td>
            </tr>
    
        </tbody>
    
    </table>

【讨论】：