Добавить колесо вертикальной прокрутки в таблицу HTML - PullRequest
Новая
       5

Добавить колесо вертикальной прокрутки в таблицу HTML

0 голосов
/ 31 августа 2018

У меня есть базовая таблица, и я хотел бы показать первые 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>

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

Вы должны поместить таблицу в 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>
0 голосов
/ 31 августа 2018 

    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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...