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

У меня есть таблица:Добавление горизонтальной и вертикальной прокрутки в таблице

<div> 
    <div className="shadow-z-1"> 
    <table className="table table-bordered table-hover"> 
     <thead> 
     <tr> 
      <th>ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>1</td> 
      <td>John</td> 
      <td>Doe</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Jane</td> 
      <td>Doe</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
    ... 
</div>

И я в настоящее время укладки его с помощью следующей таблицы стилей:

.shadow-z-1 { 
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); 
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24); 
} 

.table { 
    width: 100%; 
    max-width: 100%; 
    margin-top: 1rem; 
    margin-bottom: 2rem; 
    background-color: #fff; 
    > { 
    thead > tr, tbody > tr, tfoot > tr { 
     -webkit-transition: all 0.3s ease; 
     -o-transition: all 0.3s ease; 
     transition: all 0.3s ease; 
    } 
    thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { 
     text-align: left; 
     padding: 1.6rem; 
     vertical-align: top; 
     border-top: 0; 
     -webkit-transition: all 0.3s ease; 
     -o-transition: all 0.3s ease; 
     transition: all 0.3s ease; 
    } 
    thead > tr > th { 
     font-weight: 400; 
     color: #757575; 
     vertical-align: bottom; 
     border-bottom: 1px solid rgba(0, 0, 0, 0.12); 
    } 
    caption + thead > tr:first-child > th, colgroup + thead > tr:first-child > th, thead:first-child > tr:first-child > th, caption + thead > tr:first-child > td, colgroup + thead > tr:first-child > td, thead:first-child > tr:first-child > td { 
     border-top: 0; 
    } 
    tbody + tbody { 
     border-top: 1px solid rgba(0, 0, 0, 0.12); 
    } 
    } 
    .table { 
    background-color: #fff; 
    } 
    .no-border { 
    border: 0; 
    } 
} 

.table-condensed > { 
    thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { 
    padding: 0.8rem; 
    } 
} 

.table-bordered { 
    border: 0; 
    > { 
    thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td { 
     border: 0; 
     border-bottom: 1px solid #e0e0e0; 
    } 
    thead > tr > { 
     th, td { 
     border-bottom-width: 2px; 
     } 
    } 
    } 
} 

.table-striped > tbody > tr:nth-child(odd) > { 
    td, th { 
    background-color: #f5f5f5; 
    } 
} 

.table-hover > tbody > tr:hover > { 
    td, th { 
    background-color: rgba(0, 0, 0, 0.12); 
    } 
}

Это работает хорошо, но то, что я пытаюсь теперь нужно добавить вертикальную и горизонтальную прокрутку к таблице. Для вертикальной прокрутки я хотел бы сохранить исправление заголовка, поэтому я знаю, что мне нужно дать тело таблицы определенную высоту, но я не могу понять, где я должен делать это в своей таблице стилей. Для горизонтальной прокрутки я не знаю, с чего начать. Я хотел бы иметь возможность держать ширину всех столбцов одинаковой, чтобы, если добавлен другой, вместо того, чтобы быть сжатым в определенную область, появится горизонтальная полоса прокрутки.

Идеально я ищу для этого, используя только css (или SaSS в моем случае).

Любая помощь с этим была бы высоко оценена!

Спасибо за ваше время.

источник

2017-02-02 BeeNag

Вот код CSS:

.scroll-table-container { 
 
border:2px solid green; 
 
height: 300px; 
 
overflow: scroll; 
 
} 
 
.scroll-table, td, th { 
 
border-collapse:collapse; 
 
border:1px solid #777; 
 
min-width: 300px;}

источник

2017-02-02 16:04:58 Tudu

Совершенная спасибо! – BeeNag

Проверить этот пример:

<html> 
    <head> 
     <style> 
      div{display:inline-block;height:46px;overflow:scroll} 
      table{background:gray} 
      td{background:green} 
      td,th{width:100px} 
      th{background:orange} 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <th>ID</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
      </tr> 
     </table> 
     <div> 
      <table> 
       <tr> 
        <td>1</td> 
        <td>John</td> 
        <td>Doe</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Jane</td> 
        <td>Doe</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>Josh</td> 
        <td>Doe</td> 
       </tr> 
       <tr> 
        <td>4</td> 
        <td>Joana</td> 
        <td>Doe</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

источник

2017-02-02 16:21:24 user7393973

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

ответ

Смежные вопросы