Question

我有一个基本表，想在标题下显示前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>

Answer 1

    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>

Answer 2

您必须将表格放置在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>

将垂直滚轮添加到HTML表

2 个答案: