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

Question

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

144

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

Здесь есть простая таблица начальной загрузки, но мне почему-то неизвестно, высота тела не 10px.

height: 10px !important; overflow: scroll;

Пример:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

giulio 16 янв. 2014, в 16:11

Источник

3

Это помогает? stackoverflow.com/a/17380697/1725764
Hashem Qolami 16 янв. 2014, в 17:20
0

Это определенно помогло мне. Здесь решение jsfiddle.net/T9Bhm/7 Спасибо
giulio 16 янв. 2014, в 23:30
0

Неправильно обрабатывает таблично-полосатый атрибут, когда высоты td не совпадают. jsfiddle.net/T9Bhm/4755 См. добавленный td {overflow-wrap: break-word; } что я добавил
John Zabroski 20 июнь 2016, в 20:24

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

Теги:

twitter-bootstrap

html

css

html-table

17 ответов

70

Вероятно, вы получите несколько таблиц на одной странице, поэтому вам нужны классы CSS. Для этого вы найдете модифицированное решение @giulio.

Просто объявите его в таблице:

<table class="table table-striped header-fixed"></table>

CSS

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

Имейте в виду, что текущая реализация соответствует только пяти столбцам. Если вам нужно другое число, измените параметр width от 20% до * 100%/number_of_columns *.

Alex Klaus 04 апр. 2014, в 07:55

2

выполнив все различные сложные решения, я обнаружил, что это лучшее решение. Однако вертикальная полоса прокрутки имеет некоторую ширину (что очевидно), но из-за этого наблюдается небольшое несовпадение выравнивания между заголовками и строками. У меня есть 7 столбцов, поэтому я установил ширину 14,28% после расчета по формуле упоминания
Chetan 25 фев. 2015, в 12:48
1

Как бы я назначил определенную ширину каждому столбцу?
user1807271 27 май 2015, в 14:28
0

@ user1807271 Вы можете назначить ширину каждого столбца с помощью JS или создать класс для каждого столбца (скажем, «col1», «col2» и т. д.) с нужной шириной и назначить класс «col1» для всех ячеек в первом столбце. , "col2" con второй, и т.д ..
Luke 01 сен. 2015, в 13:33
0

Действительно очень полезно, спасибо!
Sadiksha Gautam 24 фев. 2016, в 11:06
4

Я предлагаю вам также добавить .header-fixed > thead > tr > th{white-space: nowrap;} . Если заголовки начинают оборачиваться, это все портит
by0 06 апр. 2016, в 10:16
0

не работает, если у вас есть 35 столбцов, которые я делаю
PirateApp 06 июль 2018, в 16:06
1

Это единственное решение, которое сработало для меня, я сходил с ума от этой проблемы: D Я использую материализацию, и этот ответ мне очень помог, кроме того, я добавил scrollbar-width: none; по эстетическим соображениям
Angel 27 фев. 2019, в 04:26

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

59

Фиксированная голова таблицы - только CSS

Просто position: sticky; top: 0; position: sticky; top: 0; твои th элементы. (Chrome, FF, Edge)

.tableFixHead    { overflow-y: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Фиксированная головка стола - с помощью JS

Вы можете использовать немного JS и translateY в th элементы

Пример jQuery

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});

.tableFixHead { overflow-y: auto; height: 100px; }

/* Just common table stuff. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Или простой ES6, если вы предпочитаете (jQuery не требуется):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    [...el.querySelectorAll("thead th")].forEach(th => 
       th.style.transform = 'translateY(${sT}px)';
    );
}
[...document.querySelectorAll(".tableFixHead")].forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

Roko C. Buljan 21 дек. 2017, в 11:34

7

Вау, это лучший вариант с наименьшими накладными расходами! И это работает с переполнением-x из коробки также.
Wish 22 май 2018, в 11:38
1

да! работает даже с переменной шириной ячеек (нет необходимости жестко кодировать ширину ячеек, как в других примерах) @Wish
Roko C. Buljan 22 май 2018, в 12:17
2

Отличное решение! Спасибо
Dmitry Nichiporenko 11 авг. 2018, в 07:15
2

Я обнаружил, что это работает в Chrome и Firefox, но заголовки не будут исправлены в Edge или IE11 при использовании этого подхода.
Jeff 13 авг. 2018, в 05:29
1

@ Джефф спасибо, что заметил. Отредактировал мой ответ (добавил th как селектор) - Он не работает гладко в Edge, но, по крайней мере, работает .
Roko C. Buljan 13 авг. 2018, в 07:43
0

@Roko большое спасибо за предоставление такого чистого решения, оно работает как шарм в Chrome. К сожалению, это не работает в IE11. Есть ли твик, чтобы он работал в IE11.
A P 23 нояб. 2018, в 19:37
0

@AP для IE11 (так как он не понимает липким) , вы можете использовать второй пример , который использует translateY (и код JQuery - если вы не компилировать ES6 код вашего расслоения плотного). Это будет работать , но будет выглядеть немного "прыгучим" . Но это нормально. Если кто-то хочет использовать устаревшие браузеры, то такой человек / компания никогда не будет жаловаться на случайные вещи - насколько он может видеть контент и иметь приличное взаимодействие с вашим сайтом. Интересное чтение впереди: nealbuerger.com/2018/01/the-end-of-life-of-internet-explorer-11
Roko C. Buljan 24 нояб. 2018, в 15:55
0

Заголовок «прыгает» при прокрутке в Chrome на рабочем столе.
PussInBoots 29 дек. 2018, в 18:09
2

@PussInBoots в приведенных выше примерах? Хром? Ничего не прыгает
Roko C. Buljan 29 дек. 2018, в 18:13
0

Извините, но это для меня.
PussInBoots 29 дек. 2018, в 19:00
1

Я уверен, что посетил этот вопрос примерно за год до того, как вы опубликовали это CSS-решение, и у меня появилось чувство разочарования и удивления, почему не было более простого и изящного способа сделать что-то столь необходимое. Спасибо, это потрясающе и именно то, что я искал!
billynoah 07 фев. 2019, в 19:42
0

Ужасное решение, но, но позиция для обновления браузера поддерживается.
Md. Abu Sayed 05 март 2019, в 06:16

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

52

Я использую StickyTableHeaders на GitHub и работает как шарм!

Мне пришлось добавить этот css, чтобы заголовок не был прозрачным, хотя.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

Rosdi Kasim 17 дек. 2014, в 18:14

8

Обратите внимание, что плагин stickyTableHeaders найдет только HTML, который находится на странице, когда браузер загрузил его изначально, он не будет воспринимать динамически сгенерированный контент
Rob Sedgwick 02 сен. 2015, в 11:38
2

@RobSedgwick, у меня нет этого, но все равно должно работать. Пока вы инициализируете stickyTableHeadres ПОСЛЕ того, как будет сгенерирована таблица. Это означает, что вы не можете инициализировать его в голове, но вместо этого инициализируйте его сразу после завершения динамически сгенерированной таблицы.
Rosdi Kasim 03 сен. 2015, в 21:38
1

Фантастическое решение. Очень признателен. Если у кого-то возникли проблемы с непрозрачностью фона, мне пришлось использовать .tableFloatingHeaderOriginal { //css } .
Matthew Inamdar 29 апр. 2016, в 19:19
0

Спасибо, что поделились этим плагином. Работает отлично!
blazerunner44 11 май 2016, в 04:13
0

Этот плагин не работал для меня, так как иногда голова всплывает из-за стола, а затем отскакивает назад, что создает впечатление, что st сломан.
Mati 01 дек. 2016, в 10:37
0

@ Мати, если вам нужна помощь, пожалуйста, напишите новый вопрос. Я постараюсь ответить, если это возможно.
Rosdi Kasim 02 дек. 2016, в 07:20
1

Альтернативная библиотека, которая активно поддерживается с 2017 года -> github.com/mkoryak/floatThead
Bob Jordan 07 май 2017, в 05:20
0

Как мы можем настроить вертикальную полосу прокрутки. Можем ли мы сделать это с помощью CSS.
M2012 22 май 2017, в 12:54
0

@KiranMadhav Пожалуйста, напишите новый вопрос, больше людей могут помочь.
Rosdi Kasim 26 май 2017, в 01:03

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

34

Не нужно обертывать его в div...

CSS

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: http://www.bootply.com/AgI8LpDugl

candybeer 07 май 2014, в 15:12

0

Помогло position: absolute на tbody ! Спасибо !!
Anish Nair 19 сен. 2014, в 12:20
3

Это выглядит великолепно, пока вы не поймете, что данные столбца должны быть одинаковой ширины. Если нет, то данные не попадают под заголовки.
Tmac 17 фев. 2015, в 19:44
1

@Tmac Извините, вот рабочее решение ....
Pimento Web 29 март 2016, в 19:40
0

Это решение не работает при переполнении отдельных ячеек.
John Zabroski 20 июнь 2016, в 20:18
0

что если я не хочу иметь свиток?
Dejell 22 авг. 2016, в 13:08
0

tbody после установки width: 100% заполненной ширины страницы. Был зафиксирован по position: relative table
Dmitry 23 сен. 2016, в 07:50
1

это не работает в Chrome, ни bootply, ни решение.
kevinc 07 апр. 2017, в 10:11
0

Просто для комментариев, у меня это работает в Chrome, таблица находится в середине верхней части содержимого страницы .... Можете ли вы предоставить больше информации? (Я на Linux)
Pimento Web 25 март 2019, в 11:11

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

11

Поздно к вечеринке (Рассказ о моей жизни), но так как это первый результат в google, и ни один из вышеперечисленных не заставил меня работать, вот мой код

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

Vee 23 апр. 2017, в 07:08

2

Это сработало для меня, но теперь все тд имеет одинаковую ширину. Который я не хочу.
shubhamkes 01 авг. 2017, в 08:40
3

1 голос за историю моей жизни
Sarasranglt 03 окт. 2017, в 06:47
0

Просто потрясающе. Примечание: th:nth-child(2), td:nth-child(2) эквивалентно tr > :nth-child(2)
Washington Guedes 12 апр. 2018, в 18:43
0

1 upvote за комментарий, описывающий, как стол будет «выглядеть как дерьмо», если он станет слишком маленьким, заставил меня посмеяться
Michael S. Miller 14 сен. 2018, в 13:02

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

9

Проще css

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

Simsek Mert 29 март 2018, в 17:53

9

На мой взгляд, один из лучших плагинов для jQuery - это DataTables.

Он также имеет расширение для фиксированного заголовка, и его очень легко реализовать.

Взято с их сайта:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

Но самое простое, что вы можете сделать, просто сделав прокручиваемый <tbody>:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

KD2ND 26 июль 2015, в 13:43

0

Выглядит многообещающе. Я собираюсь реализовать это позже сегодня и посмотреть, как это работает для меня.
Antoine 08 нояб. 2015, в 19:31
0

Спасибо, я реализовал это, и он отлично работает из коробки. Мне нужен был рабочий стол, которым можно управлять с мобильного устройства, и он делает именно это. Заголовок тоже прилипает.
Florida G. 05 дек. 2015, в 03:49
0

я хочу, чтобы и первый столбец, и заголовок были исправлены, что невозможно в соответствии с таблицей совместимости таблиц данных
PirateApp 06 июль 2018, в 15:30
0

Я использовал это для довольно приличного эффекта. В некоторых случаях это показалось немного странным, но это может быть моей неопытностью в CSS.
David Bradley 27 фев. 2019, в 18:43

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

2

У меня было много проблем с работой библиотеки stickytableheaders. Выполняя немного больше поиска, я нашел floatThead - активно поддерживаемая альтернатива с недавними обновлениями и лучшей документацией.

Bob Jordan 07 май 2017, в 06:33

2

Вам следует попробовать "display: block;" для tbody, потому что теперь он встроен в блок и для установки высоты элемент должен быть "block"

Walter Maier 16 янв. 2014, в 19:27

0

display: block был необходим, но затем я также должен был поместить float: left и правильную ширину для всей ячейки. Решение, которое я разместил, теперь работает.
giulio 16 янв. 2014, в 23:32

1

Вот моя копия, как сделать заголовок фиксированной таблицы с прокручиваемыми строками и столбцами. Столбцы также имеют фиксированную ширину, http://codepen.io/abhilashn/pen/GraJyp

<!-- Listing table -->
        <div class="row">
            <div class="col-sm-12">
                <div class="cust-table-cont">
                <div class="table-responsive">
                  <table border="0" class="table cust-table"> 
                    <thead>
                        <tr style="">
                          <th style="width:80px;">#</th> 
                          <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
                          <th style="width:250px;">Title</th>  
                          <th style="width:200px;">Company</th> 
                          <th style="width:100px;">Priority</th> 
                          <th style="width:120px;">Type</th>     
                          <th style="width:150px;">Assigned to</th> 
                          <th style="width:120px;">Status</th> 
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th style="width:80px;">1</th>
                          <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td style="width:250px;">Lorem ipsum dolor sit</td>
                          <td style="width:200px;">lorem ispusm</td>
                          <td style="width:100px;">high</td>
                          <td style="width:120px;">lorem ipsum</td>
                          <td style="width:150px;">lorem ipsum</td>
                          <td style="width:120px;">lorem ipsum</td>
                        </tr>

                        <tr>
                          <th scope="row">2</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">4</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">5</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">6</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">7</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">8</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">9</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">10</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">11</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">12</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                </div> <!-- End of cust-table-cont block -->
            </div>
        </div> <!-- ENd of row -->

.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }

Abhilash Narayan 18 фев. 2017, в 02:22

0

Чистое решение (только CSS)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

user3468235 29 янв. 2019, в 06:02

0

поместите таблицу внутри div таким образом, чтобы сделать таблицу с возможностью прокрутки вертикально. измените overflow-y на overflow-x чтобы сделать таблицу прокручиваемой по горизонтали. просто overflow чтобы сделать таблицу прокручиваемой как горизонтальной, так и вертикальной.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Iqbal Pratomo Santoso 31 дек. 2018, в 09:41

0

Сначала добавьте некоторую разметку для таблицы начальной загрузки. Здесь я создал полосатую таблицу, но также добавил пользовательский класс таблицы .table-scroll который добавляет вертикальную полосу прокрутки к таблице и фиксирует заголовок таблицы при прокрутке вниз.

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}

core114 13 сен. 2018, в 06:48

0

Для чего бы это ни стоило сейчас: я опубликовал решение для прокрутки Table -thread- Table с HTML и CSS, которое

занимает две таблицы (одна только для заголовка, одна для всех - выложенная браузером)
после компоновки отрегулируйте верхнюю (только для заголовка) таблицу по ширине нижней
скрыть (visibility, не display) заголовок нижней таблицы и сделать прокрутку нижней таблицы ж/в div

Решение не зависит от любых используемых стилей/фреймворков - так что, может быть, оно будет полезно и здесь...

Подробное описание приведено в разделе " Прокрутка таблиц с использованием HTML и CSS". Код также находится в этом пере: https://codepen.io/sebredhh/pen/QmJvKy.

Sebastian Rothbucher 10 апр. 2018, в 22:06

0

Вы можете разместить два div, где 1-й div (Header) будет иметь прозрачную полосу прокрутки, а второй div будет иметь данные с видимой/автоматической полосой прокрутки. Пример имеет angular фрагмент кода для обработки данных.

Ниже код работал у меня -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

Дополнительный стиль, чтобы скрыть панель прокрутки заголовка -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

Prateek Rai 30 нояб. 2015, в 23:04

-1

Использовал эту ссылку, https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody, с помощью Hashem Qolami в комментариях к исходным сообщениям и использовал отображение: inline-blocks вместо float. Исправляет границы, если таблица также имеет класс "table-bordered".

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

Затем просто добавьте ширины td и th

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

juppee 07 дек. 2014, в 13:02

Ещё вопросы

Это помогает? stackoverflow.com/a/17380697/1725764
Это определенно помогло мне. Здесь решение jsfiddle.net/T9Bhm/7 Спасибо
Неправильно обрабатывает таблично-полосатый атрибут, когда высоты td не совпадают. jsfiddle.net/T9Bhm/4755 См. добавленный td {overflow-wrap: break-word; } что я добавил
выполнив все различные сложные решения, я обнаружил, что это лучшее решение. Однако вертикальная полоса прокрутки имеет некоторую ширину (что очевидно), но из-за этого наблюдается небольшое несовпадение выравнивания между заголовками и строками. У меня есть 7 столбцов, поэтому я установил ширину 14,28% после расчета по формуле упоминания
Как бы я назначил определенную ширину каждому столбцу?
@ user1807271 Вы можете назначить ширину каждого столбца с помощью JS или создать класс для каждого столбца (скажем, «col1», «col2» и т. д.) с нужной шириной и назначить класс «col1» для всех ячеек в первом столбце. , "col2" con второй, и т.д ..
Действительно очень полезно, спасибо!
Я предлагаю вам также добавить .header-fixed > thead > tr > th{white-space: nowrap;} . Если заголовки начинают оборачиваться, это все портит
не работает, если у вас есть 35 столбцов, которые я делаю
Это единственное решение, которое сработало для меня, я сходил с ума от этой проблемы: D Я использую материализацию, и этот ответ мне очень помог, кроме того, я добавил scrollbar-width: none; по эстетическим соображениям
Вау, это лучший вариант с наименьшими накладными расходами! И это работает с переполнением-x из коробки также.
да! работает даже с переменной шириной ячеек (нет необходимости жестко кодировать ширину ячеек, как в других примерах) @Wish
Я обнаружил, что это работает в Chrome и Firefox, но заголовки не будут исправлены в Edge или IE11 при использовании этого подхода.
@ Джефф спасибо, что заметил. Отредактировал мой ответ (добавил th как селектор) - Он не работает гладко в Edge, но, по крайней мере, работает .
@Roko большое спасибо за предоставление такого чистого решения, оно работает как шарм в Chrome. К сожалению, это не работает в IE11. Есть ли твик, чтобы он работал в IE11.
@AP для IE11 (так как он не понимает липким) , вы можете использовать второй пример , который использует translateY (и код JQuery - если вы не компилировать ES6 код вашего расслоения плотного). Это будет работать , но будет выглядеть немного "прыгучим" . Но это нормально. Если кто-то хочет использовать устаревшие браузеры, то такой человек / компания никогда не будет жаловаться на случайные вещи - насколько он может видеть контент и иметь приличное взаимодействие с вашим сайтом. Интересное чтение впереди: nealbuerger.com/2018/01/the-end-of-life-of-internet-explorer-11
Заголовок «прыгает» при прокрутке в Chrome на рабочем столе.
@PussInBoots в приведенных выше примерах? Хром? Ничего не прыгает
Я уверен, что посетил этот вопрос примерно за год до того, как вы опубликовали это CSS-решение, и у меня появилось чувство разочарования и удивления, почему не было более простого и изящного способа сделать что-то столь необходимое. Спасибо, это потрясающе и именно то, что я искал!
Ужасное решение, но, но позиция для обновления браузера поддерживается.
Обратите внимание, что плагин stickyTableHeaders найдет только HTML, который находится на странице, когда браузер загрузил его изначально, он не будет воспринимать динамически сгенерированный контент
@RobSedgwick, у меня нет этого, но все равно должно работать. Пока вы инициализируете stickyTableHeadres ПОСЛЕ того, как будет сгенерирована таблица. Это означает, что вы не можете инициализировать его в голове, но вместо этого инициализируйте его сразу после завершения динамически сгенерированной таблицы.
Фантастическое решение. Очень признателен. Если у кого-то возникли проблемы с непрозрачностью фона, мне пришлось использовать .tableFloatingHeaderOriginal { //css } .
Спасибо, что поделились этим плагином. Работает отлично!
Этот плагин не работал для меня, так как иногда голова всплывает из-за стола, а затем отскакивает назад, что создает впечатление, что st сломан.
@ Мати, если вам нужна помощь, пожалуйста, напишите новый вопрос. Я постараюсь ответить, если это возможно.
Альтернативная библиотека, которая активно поддерживается с 2017 года -> github.com/mkoryak/floatThead
Как мы можем настроить вертикальную полосу прокрутки. Можем ли мы сделать это с помощью CSS.
@KiranMadhav Пожалуйста, напишите новый вопрос, больше людей могут помочь.
Помогло position: absolute на tbody ! Спасибо !!
Это выглядит великолепно, пока вы не поймете, что данные столбца должны быть одинаковой ширины. Если нет, то данные не попадают под заголовки.
@Tmac Извините, вот рабочее решение ....
Это решение не работает при переполнении отдельных ячеек.
tbody после установки width: 100% заполненной ширины страницы. Был зафиксирован по position: relative table
это не работает в Chrome, ни bootply, ни решение.
Просто для комментариев, у меня это работает в Chrome, таблица находится в середине верхней части содержимого страницы .... Можете ли вы предоставить больше информации? (Я на Linux)
Это сработало для меня, но теперь все тд имеет одинаковую ширину. Который я не хочу.
Просто потрясающе. Примечание: th:nth-child(2), td:nth-child(2) эквивалентно tr > :nth-child(2)
1 upvote за комментарий, описывающий, как стол будет «выглядеть как дерьмо», если он станет слишком маленьким, заставил меня посмеяться
Выглядит многообещающе. Я собираюсь реализовать это позже сегодня и посмотреть, как это работает для меня.
Спасибо, я реализовал это, и он отлично работает из коробки. Мне нужен был рабочий стол, которым можно управлять с мобильного устройства, и он делает именно это. Заголовок тоже прилипает.
я хочу, чтобы и первый столбец, и заголовок были исправлены, что невозможно в соответствии с таблицей совместимости таблиц данных
Я использовал это для довольно приличного эффекта. В некоторых случаях это показалось немного странным, но это может быть моей неопытностью в CSS.
display: block был необходим, но затем я также должен был поместить float: left и правильную ширину для всей ячейки. Решение, которое я разместил, теперь работает.

giulio · Accepted Answer · 2014-01-17T01-18-00.000Z

Вот рабочее решение

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
}

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

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

Ссылка на jsfiddle

Не работает в IE9 (и, возможно, других); требуются столбцы фиксированной ширины (и есть гораздо более простые, более кросс-браузерные решения, если вы собираетесь использовать столбцы фиксированной ширины); плохо ломается, если содержимое превышает фиксированную ширину; фактически не выстраивает заголовки и столбцы (вы можете увидеть это в скрипте, связанной выше ; в этой версии это более ясно, что дает им простую границу), хотя это, вероятно, можно исправить; полоса прокрутки не совсем совпадает с телом таблицы ...
добавьте видимую границу к td и th, и вы увидите, что ширина td не соответствует ширине th
Проблема с этим решением состоит в том, что оно требует фиксированной высоты. Это не сработает, когда приходит адаптивный дизайн. Я работал над решением, которое использует position: fixed, которое решает проблему с прокруткой, но портит ширину строк.
Стол с нарушенной границей : jsfiddle.net/mpsbhat/T9Bhm/4801
Вы можете вручную исправить ширину td, не соответствующую ширине th, отделив объявление% ширины для td и th, и просто установить th как чуть более узкий. Вы должны будете делать это каждый раз, но это не то, что следует использовать так часто.