HTML-таблица шириной 100% с вертикальной прокруткой внутри тела

Question

HTML-таблица шириной 100% с вертикальной прокруткой внутри тела

317

Как я могу установить для <table> 100% ширину и помещать только внутри <tbody> вертикальную прокрутку для некоторой высоты?

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

<table>
  <thead>
    <tr>
    	<th>Head 1</th>
    	<th>Head 2</th>
    	<th>Head 3</th>
    	<th>Head 4</th>
    	<th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>Content 1</td>
    	<td>Content 2</td>
    	<td>Content 3</td>
    	<td>Content 4</td>
    	<td>Content 5</td>
    </tr>
  </tbody>
</table>

Я хочу избежать добавления дополнительного div, все, что мне нужно, это простая таблица, подобная этой, и когда я пытаюсь изменить отображение, table-layout, position и многое другое в таблице CSS не работает хорошо со 100% шириной с фиксированной шириной в px.

Marko S 12 июнь 2013, в 13:57

Источник

0

Я не совсем уверен, чего ты хочешь достичь. посмотрите на это: jsfiddle.net/CrSpu и расскажите, как вы хотите, чтобы он вел себя
x4rf41 12 июнь 2013, в 13:57
1

я знаю, но посмотрите .. th и td не показаны во всю ширину .. postimg.org/image/mgd630y61
Marko S 12 июнь 2013, в 14:02
0

Похожие страницы : stackoverflow.com/questions/1019938/…
Christophe Roussy 08 авг. 2013, в 10:39
0

Похожие страницы : stackoverflow.com/q/4534200/435605 и stackoverflow.com/q/33075195/435605
AlikElzin-kilaka 22 окт. 2015, в 12:26

Показать ещё 2 комментария

Теги:

html

css

css3

vertical-scrolling

9 ответов

69

В следующем решении таблица занимает 100% родительского контейнера, не требуя абсолютных размеров. Используется чистый CSS, гибкий макет.

Вот как это выглядит:

Возможные недостатки:

вертикальная полоса прокрутки всегда видна независимо от того, требуется ли она;
табличный макет фиксирован - столбцы не изменяются в соответствии с шириной содержимого (вы все равно можете установить любую ширину столбца, которую вы хотите явно);
существует один абсолютный размер - ширина полосы прокрутки, которая составляет около 0.9em для браузеров, которые я смог проверить.

HTML (сокращенный):

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            ...
        </tbody>
    </table>
</div>

CSS, с некоторыми украшениями, опущенными для ясности:

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

полный код jsfiddle

Тот же код в LESS, чтобы вы могли смешать его:

.table-scrollable() {
  @scrollbar-width: 0.9em;
  display: flex;
  flex-flow: column;

  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }

  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }

  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;

    tr {
      width: 100%;
    }
  }
}

tsayen 08 апр. 2015, в 12:09

1

Спасибо за решение! Была небольшая ошибка .... Вы дважды установили ширину для thead, и я обнаружил, что вычитание 1.05em из ширины немного лучше: jsfiddle.net/xuvsncr2/170
TigerBear 13 нояб. 2015, в 23:21
1

как насчет содержимого номера символа? портится при добавлении большего количества символов или слов в ячейки строки
Limon 05 янв. 2016, в 16:14
0

Я думаю, что установка подходящей политики упаковки на td должна помочь
tsayen 06 янв. 2016, в 13:46
0

Любое решение, подобное этому, но отпадает необходимость в ширине 100%?
Alexandre Pereira Nunes 07 март 2016, в 20:17
0

Если вы не хотите, чтобы таблица занимала 100% родительского контейнера, вы можете попробовать добавить другой контейнер между таблицей и родительским контейнером и установить его ширину в соответствии с вашими предпочтениями.
tsayen 08 март 2016, в 12:40
0

Мне нравится решение, но то , что о том, когда у вас есть несколько tbody «s для того, когда вы группировать данные?
Marais Rossouw 02 авг. 2016, в 23:40
0

Люблю это решение, спасибо! Я не хочу, чтобы таблица занимала 100% высоты (из-за стиля границ таблицы). Это сделает его настолько высоким, насколько это необходимо, и начните прокрутку, как только он заполнит свой контейнер: .table-container { display: flex; flex-direction: column; justify-content: flex-start; }
T. Roggendorf 28 сен. 2016, в 08:58
0

Отличное решение, flexbox - определенно верный путь.
dojosto 06 апр. 2017, в 19:24
1

@tsayen Как вы мешаете ему скручиваться и перекрываться при изменении размера окна?
clearshot66 04 май 2017, в 20:00
0

Это работает очень хорошо, я думаю, что это должно быть принятое решение
Caspar Harmer 04 авг. 2017, в 05:29
0

Спасибо мужчина, ты великолепен. Не могли бы вы дать исправление для запуска этого кода с использованием IE 9 и выше?
Daniel Carpio Contreras 29 сен. 2017, в 20:46
0

Идеальный ответ!
RP Nainwal 07 янв. 2019, в 10:28

Показать ещё 10 комментариев

14

Я использую display:block для thead и tbody. Из-за этого ширина столбцов thead отличается от ширины столбцов tbody.

table {margin:0 auto; border-collapse:collapse;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block}

Чтобы исправить это, я использую небольшой код jQuery, но это можно сделать только в JavaScript.

var colNumber=3 //number of table columns    

for (var i=0; i<colNumber; i++)
  {
  var thWidth=$("#myTable").find("th:eq("+i+")").width();
  var tdWidth=$("#myTable").find("td:eq("+i+")").width();      
  if (thWidth<tdWidth)                    
      $("#myTable").find("th:eq("+i+")").width(tdWidth);
  else
      $("#myTable").find("td:eq("+i+")").width(thWidth);           
  }

Вот моя рабочая демонстрация: http://jsfiddle.net/gavroche/N7LEF/

Не работает в IE 8

var colNumber=3 //number of table columns


for (var i=0; i<colNumber; i++)
  {
      var thWidth=$("#myTable").find("th:eq("+i+")").width();
      var tdWidth=$("#myTable").find("td:eq("+i+")").width();      
      if (thWidth<tdWidth)                    
          $("#myTable").find("th:eq("+i+")").width(tdWidth);
      else
          $("#myTable").find("td:eq("+i+")").width(thWidth);           
  }

 table {margin:0 auto; border-collapse:separate;}
 thead {background:#CCCCCC;display:block}
 tbody {height:10em;overflow-y:scroll;display:block}

<script src="/jquery.min.js"></script>
<table id="myTable" border="1">
    <thead>
        <tr>
            <th>A really Very Long Header Text</th>
            <th>Normal Header</th>
            <th>Short</th>            
        </tr>    
    </thead>
    <tbody>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
        <tr>
            <td>
                Text shorter than header
            </td>
            <td>
                Text is longer than header
            </td>
            <td>
                Exact
            </td>
        </tr>
    </tbody>
</table>

gavroche 18 март 2014, в 08:54

0

Это лучшее / простое решение, которое я нашел, которое допускает нефиксированную ширину столбцов (например, элемент управления .NET DataGrid). Для «production» переменная colNumber может быть заменена кодом, который выполняет итерацию по фактическим найденным ячейкам, и обратите внимание, что она не справляется правильно, если есть какие-либо colspan s (также может быть улучшено в коде, если необходимо, но вряд ли в вид таблицы, вероятно, захотят эту функцию прокрутки).
JonBrave 03 июль 2014, в 10:48
0

Это работает (в моде), но не справляется, когда размер окна меньше размера таблицы (так как игнорируется ширина полосы прокрутки).
Gone Coding 31 март 2015, в 09:41
0

Да, заголовок и ячейки больше не совпадают, если ширина таблицы ограничена заданной шириной
Craig 26 июнь 2015, в 15:09
0

лучший ответ здесь, самый простой тоже
Charles Okwuagwu 06 дек. 2018, в 18:18

Показать ещё 2 комментария

11

Создайте две таблицы один за другим, поместите вторую таблицу в div с фиксированной высотой и установите для свойства переполнения значение auto. Также сохраните все td внутри thead во второй таблице пустым.

<div>
    <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
                <th>Head 4</th>
                <th>Head 5</th>
            </tr>
        </thead>
    </table>
</div>

<div style="max-height:500px;overflow:auto;">
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        </tbody>
    </table>    
</div>

Sushil Kumar 20 сен. 2016, в 11:31

3

Самый вменяемый подход! <3
animaacija 01 дек. 2016, в 18:34
5

В этом случае столбцы второй таблицы не могут следовать ширине первой таблицы.
kat1330 29 март 2017, в 22:39
0

Нехорошо! Вы теряете синхронизацию ширины для столбцов в двух таблицах.
Zafar 14 окт. 2017, в 19:16
1

чтобы завершить это решение, нам нужно добавить скрипт @Hashem Qolami ( опишите выше ), чтобы синхронизировать ширину столбцов заголовка
Elhay Avichzer 10 янв. 2018, в 21:56

Показать ещё 2 комментария

6

В современных браузерах вы можете просто использовать css:

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

Gauss 14 дек. 2017, в 18:08

4

Это заклинание неполное ... Хотите опубликовать пример или хотя бы разработать?
Liam 10 фев. 2018, в 06:32
0

работает хорошо, но относится только к го. Если мы установим позицию на thead, то это не сработает.
Vishal 21 фев. 2018, в 19:04
0

Идеальный ответ.
Kais 22 окт. 2018, в 16:43
0

Исправлено thead должно добавить в W3C!
sonichy 22 фев. 2019, в 05:42

Показать ещё 2 комментария

6

Я получил это окончательно с чистым CSS, выполнив следующие инструкции:

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

Первый шаг - установить <tbody> для отображения: block, чтобы можно было использовать переполнение и высоту. Оттуда строки в <thead> должны быть установлены в положение: relative и display: block, чтобы они располагались поверх прокручиваемого теперь <tbody>.

tbody, thead { display: block; overflow-y: auto; }

Поскольку <thead> относительно позиционируется, каждая ячейка таблицы нуждается в явной ширине

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

Но, к сожалению, этого недостаточно. При наличии полосы прокрутки браузеры выделяют для нее пространство, поэтому <tbody> заканчивается тем, что имеет меньше свободного места, чем <thead>. Обратите внимание на небольшое несоосность, которое создает...

Единственным обходным решением, которое я мог придумать, было установить минимальную ширину для всех столбцов, кроме последней.

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

Пример всего кода:

CSS

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333333;
  color: #fdfdfd;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #dddddd;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

Html:

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

<!--[if lte IE 9]>
</div>
<!--<![endif]-->

EDIT: Альтернативное решение для ширины таблицы 100% (выше, фактически, имеет фиксированную ширину и не отвечает на вопрос):

HTML:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody { 
  height: 150px; 
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* some colors */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

Демо: http://codepen.io/anon/pen/bNJeLO

Mikael Lepistö 23 сен. 2014, в 08:02

1

Вопрос, в частности, требовал таблицы шириной 100%, что является той вещью, на которую пример, на который вы ссылались , не работает .
Gone Coding 31 март 2015, в 09:35
0

@TrueBlueAussie Хороший улов: D Добавлено альтернативное решение для 100% ширины.
Mikael Lepistö 03 апр. 2015, в 23:50
0

вы не учитываете долготу содержимого строки ячейки
Limon 05 янв. 2016, в 16:15

Показать ещё 1 комментарий

2

попробуйте подход ниже, очень простой в использовании

Ниже приведена ссылка jsfiddle

http://jsfiddle.net/v2t2k8ke/2/

HTML:

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

CSS

 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

Jquery:

 var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '<tr>';
       $.each(value, function (key, value) {
       stb += '<td>' + value + '</td>';
       });
       stb += '</tr>';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

Nandha Kumar R 12 фев. 2015, в 12:22

2

Это решение не справляется с тем, что окно уже, чем ширина таблицы. Это должно включить горизонтальную прокрутку, когда это произойдет. Также заголовки не совпадают точно с ячейками данных (Chrome).
Gone Coding 31 март 2015, в 10:01

2

Обходной метод Css для принудительного отображения столбцов с тегом 'block' tbody

Это решение по-прежнему требует, чтобы ширины th были вычислены и заданы с помощью jQuery

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

И JQuery/Javascript

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

    // Get the tbody columns width array
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

}).resize(); // Trigger resize handler

Emmanuel 26 нояб. 2014, в 20:44

0

Работает чудесно .. кроме как в IE 11 :(
Craig 26 июнь 2015, в 18:28

1

Добавление фиксированной ширины к td, th после создания блока tbody и thead, а также мы можем использовать slimscroll, чтобы сделать полосу прокрутки красивой.

<!DOCTYPE html>
<html>

<head>
    <title> Scrollable table </title>
    <style>
        body {
            font-family: sans-serif;
            font-size: 0.9em;
        }
        table {
            border-collapse: collapse;
            border-bottom: 1px solid #ddd;
        }
        thead {
            background-color: #333;
            color: #fff;
        }
        thead,tbody {
            display: block;
        }
        th,td {
            padding: 8px 10px;
            border: 1px solid #ddd;
            width: 117px;
            box-sizing: border-box;
        }
        tbody {
            height: 160px;
            overflow-y: scroll
        }
    </style>
</head>

<body>

    <table class="example-table">
        <thead>
            <tr>
                <th> Header 1 </th>
                <th> Header 2 </th>
                <th> Header 3 </th>
                <th> Header 4 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Row 1- Col 1 </td>
                <td> Row 1- Col 2 </td>
                <td> Row 1- Col 3 </td>
                <td> Row 1- Col 4 </td>
            </tr>
            <tr>
                <td> Row 2- Col 1 </td>
                <td> Row 2- Col 2 </td>
                <td> Row 2- Col 3 </td>
                <td> Row 2- Col 4 </td>
            </tr>
            <tr>
                <td> Row 3- Col 1 </td>
                <td> Row 3- Col 2 </td>
                <td> Row 3- Col 3 </td>
                <td> Row 3- Col 4 </td>
            </tr>
            <tr>
                <td> Row 4- Col 1 </td>
                <td> Row 4- Col 2 </td>
                <td> Row 4- Col 3 </td>
                <td> Row 4- Col 4 </td>
            </tr>
            <tr>
                <td> Row 5- Col 1 </td>
                <td> Row 5- Col 2 </td>
                <td> Row 5- Col 3 </td>
                <td> Row 5- Col 4 </td>
            </tr>
            <tr>
                <td> Row 6- Col 1 </td>
                <td> Row 6- Col 2 </td>
                <td> Row 6- Col 3 </td>
                <td> Row 6- Col 4 </td>
            </tr>
            <tr>
                <td> Row 7- Col 1 </td>
                <td> Row 7- Col 2 </td>
                <td> Row 7- Col 3 </td>
                <td> Row 7- Col 4 </td>
            </tr>
            <tr>
                <td> Row 8- Col 1 </td>
                <td> Row 8- Col 2 </td>
                <td> Row 8- Col 3 </td>
                <td> Row 8- Col 4 </td>
            </tr>
            <tr>
                <td> Row 9- Col 1 </td>
                <td> Row 9- Col 2 </td>
                <td> Row 9- Col 3 </td>
                <td> Row 9- Col 4 </td>
            </tr>
            <tr>
                <td> Row 10- Col 1 </td>
                <td> Row 10- Col 2 </td>
                <td> Row 10- Col 3 </td>
                <td> Row 10- Col 4 </td>
            </tr>
            <tr>
                <td> Row 11- Col 1 </td>
                <td> Row 11- Col 2 </td>
                <td> Row 11- Col 3 </td>
                <td> Row 11- Col 4 </td>
            </tr>
            <tr>
                <td> Row 12- Col 1 </td>
                <td> Row 12- Col 2 </td>
                <td> Row 12- Col 3 </td>
                <td> Row 12- Col 4 </td>
            </tr>
            <tr>
                <td> Row 13- Col 1 </td>
                <td> Row 13- Col 2 </td>
                <td> Row 13- Col 3 </td>
                <td> Row 13- Col 4 </td>
            </tr>
            <tr>
                <td> Row 14- Col 1 </td>
                <td> Row 14- Col 2 </td>
                <td> Row 14- Col 3 </td>
                <td> Row 14- Col 4 </td>
            </tr>
            <tr>
                <td> Row 15- Col 1 </td>
                <td> Row 15- Col 2 </td>
                <td> Row 15- Col 3 </td>
                <td> Row 15- Col 4 </td>
            </tr>
            <tr>
                <td> Row 16- Col 1 </td>
                <td> Row 16- Col 2 </td>
                <td> Row 16- Col 3 </td>
                <td> Row 16- Col 4 </td>
            </tr>
        </tbody>
    </table>


    <script src="/jquery.min.js"></script>
    <script src="/jquery.slimscroll.min.js"></script>
    <script>
        $('.example-table tbody').slimscroll({
            height: '160px',
            alwaysVisible: true,
            color: '#333'
        })
    </script>
</body>

</html>

codegeek 07 авг. 2017, в 11:34

Ещё вопросы

Я не совсем уверен, чего ты хочешь достичь. посмотрите на это: jsfiddle.net/CrSpu и расскажите, как вы хотите, чтобы он вел себя
я знаю, но посмотрите .. th и td не показаны во всю ширину .. postimg.org/image/mgd630y61
Похожие страницы : stackoverflow.com/questions/1019938/…
Похожие страницы : stackoverflow.com/q/4534200/435605 и stackoverflow.com/q/33075195/435605
Спасибо за решение! Была небольшая ошибка .... Вы дважды установили ширину для thead, и я обнаружил, что вычитание 1.05em из ширины немного лучше: jsfiddle.net/xuvsncr2/170
как насчет содержимого номера символа? портится при добавлении большего количества символов или слов в ячейки строки
Я думаю, что установка подходящей политики упаковки на td должна помочь
Любое решение, подобное этому, но отпадает необходимость в ширине 100%?
Если вы не хотите, чтобы таблица занимала 100% родительского контейнера, вы можете попробовать добавить другой контейнер между таблицей и родительским контейнером и установить его ширину в соответствии с вашими предпочтениями.
Мне нравится решение, но то , что о том, когда у вас есть несколько tbody «s для того, когда вы группировать данные?
Люблю это решение, спасибо! Я не хочу, чтобы таблица занимала 100% высоты (из-за стиля границ таблицы). Это сделает его настолько высоким, насколько это необходимо, и начните прокрутку, как только он заполнит свой контейнер: .table-container { display: flex; flex-direction: column; justify-content: flex-start; }
Отличное решение, flexbox - определенно верный путь.
@tsayen Как вы мешаете ему скручиваться и перекрываться при изменении размера окна?
Это работает очень хорошо, я думаю, что это должно быть принятое решение
Спасибо мужчина, ты великолепен. Не могли бы вы дать исправление для запуска этого кода с использованием IE 9 и выше?
Это лучшее / простое решение, которое я нашел, которое допускает нефиксированную ширину столбцов (например, элемент управления .NET DataGrid). Для «production» переменная colNumber может быть заменена кодом, который выполняет итерацию по фактическим найденным ячейкам, и обратите внимание, что она не справляется правильно, если есть какие-либо colspan s (также может быть улучшено в коде, если необходимо, но вряд ли в вид таблицы, вероятно, захотят эту функцию прокрутки).
Это работает (в моде), но не справляется, когда размер окна меньше размера таблицы (так как игнорируется ширина полосы прокрутки).
Да, заголовок и ячейки больше не совпадают, если ширина таблицы ограничена заданной шириной
лучший ответ здесь, самый простой тоже
В этом случае столбцы второй таблицы не могут следовать ширине первой таблицы.
Нехорошо! Вы теряете синхронизацию ширины для столбцов в двух таблицах.
чтобы завершить это решение, нам нужно добавить скрипт @Hashem Qolami ( опишите выше ), чтобы синхронизировать ширину столбцов заголовка
Это заклинание неполное ... Хотите опубликовать пример или хотя бы разработать?
работает хорошо, но относится только к го. Если мы установим позицию на thead, то это не сработает.
Исправлено thead должно добавить в W3C!
Вопрос, в частности, требовал таблицы шириной 100%, что является той вещью, на которую пример, на который вы ссылались , не работает .
@TrueBlueAussie Хороший улов: D Добавлено альтернативное решение для 100% ширины.
вы не учитываете долготу содержимого строки ячейки
Это решение не справляется с тем, что окно уже, чем ширина таблицы. Это должно включить горизонтальную прокрутку, когда это произойдет. Также заголовки не совпадают точно с ячейками данных (Chrome).
Работает чудесно .. кроме как в IE 11 :(

Hashem Qolami · Accepted Answer · 2013-06-29T13-46-00.000Z

Чтобы сделать прокручиваемый элемент <tbody>, нам нужно изменить способ его отображения на странице, используя display: block;, чтобы отобразить это как элемент уровня блока.

Так как мы изменяем свойство display для tbody, мы должны изменить это свойство для элемента thead, чтобы предотвратить разрыв макета таблицы.

Итак, мы имеем:

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

Веб-браузеры отображают элементы thead и tbody как группу строк (table-header-group и table-row-group) по умолчанию.

Как только мы изменим это, внутренние элементы tr не заполняют все пространство своего контейнера.

Чтобы исправить это, мы должны вычислить ширину столбцов tbody и применить соответствующее значение к столбцам thead через JavaScript.

Колонки автоматической ширины

Вот версия jQuery выше логики:

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});

И вот вывод (в Windows 7 Chrome 32):

РАБОЧИЙ ДЕМО.

Таблица полной ширины, столбцы с относительной шириной

В качестве исходного плаката мы могли бы расширить table до 100% width своего контейнера, а затем использовать относительный (процент) width для каждого столбца таблицы.

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

Поскольку таблица имеет (вид) компоновку жидкости, мы должны отрегулировать ширину столбцов thead при изменении размера контейнера.

Следовательно, мы должны установить ширину столбцов после изменения размера окна:

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

Вывод будет:

РАБОЧИЙ ДЕМО.

Поддержка и альтернативы браузера

Я тестировал два вышеуказанных метода в Windows 7 через новые версии основных веб-браузеров (включая IE10 +), и он работал.

Однако не work в IE9 и ниже.

Это потому, что в макете , все элементы должны следовать тем же структурным свойствам.

Используя display: block; для элементов <thead> и <tbody>, мы нарушили структуру таблицы.

Редизайн макета с помощью JavaScript

Один из подходов состоит в том, чтобы перепроектировать (целую) таблицу. Использование JavaScript для создания нового макета "на лету" и управления и/или регулировки ширины/высоты ячеек динамически.

Например, взгляните на следующие примеры:

jQuery . floatThead() плагин (плавающий/заблокированный/липкий плагин заголовка таблицы)
jQuery Прокручиваемый стол. (исходный код на github)
jQuery . FixedHeaderTable() плагин (исходный код на github)
Таблицы данных вертикальная прокрутка.

Таблицы вложенности

В этом подходе используются две вложенные таблицы с содержащим div. Первая table имеет только одну ячейку, которая имеет div, а вторая таблица помещается внутри этого элемента div.

Отметьте Вертикальные таблицы прокрутки в CSS Play.

Это работает на большинстве веб-браузеров. Мы также можем динамически выполнять вышеуказанную логику с помощью JavaScript.

Таблица с фиксированным заголовком на прокрутке

Поскольку для добавления вертикальной полосы прокрутки в <tbody> отображается таблица заголовок в верхней части каждой строки, мы могли бы позиционировать элемент thead вместо этого удерживайте fixed в верхней части экрана.

Вот Рабочий демонстрационный пример этого подхода, выполненный Жюльен.
Он имеет многообещающую поддержку веб-браузера.

И здесь чистый CSS. Виллем Ван Боксталь.

Чистое решение для CSS

Вот старый ответ. Конечно, я добавил новый метод и уточнил объявления CSS.

Таблица с фиксированной шириной

В этом случае table должен иметь фиксированный width (включая сумму ширины столбцов и ширину вертикальной полосы прокрутки).

Каждый столбец должен иметь определенную ширину и последний столбецэлемента thead требуется большая ширина, равная ширине остальных + ширине вертикальной полосы прокрутки.

Следовательно, CSS будет:

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

Вот результат:

РАБОЧИЙ ДЕМО.

Таблица со 100% шириной

В этом подходе table имеет ширину 100% и для каждого th и td значение свойства width должно быть меньше 100% / number of cols.

Кроме того, нам нужно уменьшить ширину thead как значение ширины вертикальной полосы прокрутки.

Для этого нам нужно использовать функцию CSS3 calc(), как показано ниже:

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

Вот онлайн-демонстрация.

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

В следующем примере есть два простых примера чистого решения CSS, которые я создал в то время, когда я ответил на этот вопрос.

Вот jsFiddle Demo v2.

Старая версия: jsFiddle Demo v1

С помощью display: block вы теряете свойства таблицы как ширину столбца, разделяемую между thead и tbody. Я знаю, что вы исправили это, установив width: 19.2% но в случае, если мы не знаем ширину каждого столбца заранее, это не сработает.
Этот код, кажется, предполагает, что клетки тела всегда будут шире, чем клетки заголовка.
Не работает, когда height: 100% (когда вы хотите, чтобы таблица расширялась до нижней части страницы).
Это также фантастически работает с таблицами AngularJS ng-repeat . Не уверен, почему есть все эти библиотеки с фиксированными заголовками таблиц, а что нет, когда есть это решение.
Вы можете немного улучшить это с помощью свойства box-sizing чтобы границы двух разных толщин не нарушали выравнивание столбцов.
Я знаю, что не должен, но +1 и спасибо! Хорошо прокомментировал и объяснил
Видеть полосу прокрутки, встроенную в макет, неудобно, поэтому вот еще одно решение Javascript, которое также скрывает полосу прокрутки: github.com/cubiclesoft/jquery-tablebodyscroll Demo (в разделе «Добавить запись»): barebonescms.com/demos/admin_pack/admin.php Полное раскрытие: я автор.
Если вы используете его в машинописи, определение colWidth var не работает ... необходимо сделать colWidth = $bodyCells.toArray().map(function() { return $(this).width(); }); потому что jquery.map возвращает объект jquery, а не массив чисел
Идеальный ответ ... Хотелось бы, чтобы я мог голосовать более одного раза.
Для чистого CSS, возможно, ответ с flex решением более уместен (по крайней мере, он работал лучше и его было гораздо легче настроить, чем решение «Таблица со 100% шириной» этого ответа).