Вопрос:
Я пытаюсь сделать таблицу с фиксированным заголовком и прокручиваемым содержимым, используя таблицу начальной загрузки 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>Лучший ответ:
Вот рабочее решение:
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; }<link href=»http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css» rel=»stylesheet»/> <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>
Ссылка на jsfiddle
Ответ №1Содержание
- Фиксированная голова таблицы – только CSS
- Фиксированная головка стола – с помощью JS
- Исправлена проблема с границей TH
- HTML
- CSS
Фиксированная голова таблицы – только CSS
Просто position: sticky; top: 0; position: sticky; top: 0; твои th элементы. (Chrome, FF, Edge)
.tableFixHead { overflow-y: auto; height: 100px; } .tableFixHead thead 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) );
Исправлена проблема с границей TH
К сожалению, border не может быть нарисована правильно на переведенном элементе TH. Для создания и визуализации “границ” мы можем использовать свойство box-shadow:
/* Borders (if you need them) */ .tableFixHead { border: 1px solid #000; border-left: 0; border-right: 0; } .tableFixHead th, td { border: 1px solid #000; border-top: 0; } .tableFixHead tbody tr:last-child td { border-bottom: 0; } .tableFixHead thead th { box-shadow: 1px 1px 0 #000; } .tableFixHead { overflow-y: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } /* Borders (if you need them) */ .tableFixHead { border: 1px solid #000; border-left: 0; border-right: 0; } .tableFixHead th, td { border: 1px solid #000; border-top: 0; } .tableFixHead tbody tr:last-child td { border-bottom: 0; } .tableFixHead thead th { box-shadow: 1px 1px 0 #000; }<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>Ответ №2
Вероятно, вы получите несколько таблиц на одной странице, поэтому вам нужны классы 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 *.
Ответ №3
Я использую StickyTableHeaders на GitHub и работает как шарм!
Мне пришлось добавить этот css, чтобы заголовок не был прозрачным, хотя.
table#stickyHeader thead { border-top: none; border-bottom: none; background-color: #FFF; } Ответ №4
Не нужно обертывать его в 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:
Ответ №5
Проще css
table tbody { display:block; max-height:450px; overflow-y:scroll; } table thead, table tbody tr { display:table; width:100%; table-layout:fixed; } Ответ №6
Поздно к вечеринке (Рассказ о моей жизни), но так как это первый результат в 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; } Ответ №7
На мой взгляд, один из лучших плагинов для 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 }); Ответ №8
Вам следует попробовать “display: block;” для tbody, потому что теперь он встроен в блок и для установки высоты элемент должен быть “block”
Ответ №9
У меня было много проблем с работой библиотеки stickytableheaders. Выполняя немного больше поиска, я нашел floatThead – активно поддерживаемая альтернатива с недавними обновлениями и лучшей документацией.
Ответ №10
Сначала добавьте некоторую разметку для таблицы начальной загрузки. Здесь я создал полосатую таблицу, но также добавил пользовательский класс таблицы .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; } Ответ №11
Последнее добавленное положение: “липкое” было бы самым простым решением здесь
.outer{ overflow-y: auto; height:100px; } .outer table{ width: 100%; table-layout: fixed; border : 1px solid black; border-spacing: 1px; } .outer table th { text-align: left; top:0; position: sticky; background-color: white; } <div class = «outer»> <table> <tr > <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> <tr > <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <tr> </table> </div>Ответ №12
Я использовал плагин floatThead jQuery (https://mkoryak.github.io/floatThead/#intro)
Документы говорят, что он работает с таблицами Bootstrap 3, и я могу сказать, что он также работает с таблицами Bootstrap 4 с или без помощника, реагирующего на таблицы.
Использовать плагин так же просто, как это:
HTML (ванильная разметка таблицы начальной загрузки)
<div class=»table-responsive»> <table id=»myTable» class=»table table-striped»> <thead>…</thead> <tbody>…</tbody> </table> </div>
Инициализация плагина:
$(document).ready(function() { var tbl=$(‘#myTable’); tbl.floatThead({ responsiveContainer: function(tbl) { return tbl.closest(‘.table-responsive’); } }); });
Полный отказ от ответственности: я не связан с плагином в любом случае. Я нашел его после нескольких часов попыток многих других решений, опубликованных здесь и в других местах.
Ответ №13
Для таблиц полной высоты (страница прокручивается, а не таблица)
Примечание: я перемещаю весь <thead>…</thead> потому что в моем случае у меня было две строки (заголовок и фильтры)
С JS (jQuery)
$( function() { let marginTop = 0; // Add margin if the page has a top nav-bar let $thead = $(‘.table-fixed-head’).find(‘thead’); let offset = $thead.first().offset().top — marginTop; let lastPos = 0; $(window).on(‘scroll’, function () { if ( window.scrollY > offset ) { if ( lastPos === 0 ) { // Add a class for styling $thead.addClass(‘floating-header’); } lastPos = window.scrollY — offset; $thead.css(‘transform’, ‘translateY(‘ + ( lastPos ) + ‘px)’); } else if ( lastPos !== 0 ) { lastPos = 0; $thead.removeClass(‘floating-header’); $thead.css(‘transform’, ‘translateY(‘ + 0 + ‘px)’); } }); });
CSS (только для стиля)
thead.floating-header>tr>th { background-color: #efefef; } thead.floating-header>tr:last-child>th { border-bottom: 1px solid #aaa; } Ответ №14
Я получил рабочее решение основного запроса, т.е.
Как получить “прокручиваемую” таблицу с “фиксированным” заголовком?
Вот что я сделал (заполняемые данные предназначены только для демонстрации):
Ниже приведены мои коды CSS и HTML:
div.ex1 { width: 640px; height: 310px; overflow: auto; } table { border-collapse: collapse; width: 100%; } th { background: teal; padding: 8px 16px; } .tableFixHead { overflow: auto; } .tableFixHead thead th { position: sticky; top: 0; } <link rel=»stylesheet» href=»https://www.w3schools.com/w3css/4/w3.css»> <div class=»tableFixHead ex1 text-nowrap w3-container w3-responsive»> <table class=»table table-striped w-auto w3-table-all w3-hoverable w3-bordered»> <thead> <tr class=»w3-theme»> <th>Director Name</th> <th>Motion Picture</th> <th>Year Released</th> <th>Rating</th> </tr> </thead> <tbody > <tr> <td>Francis Ford Coppola</td> <td>The Godfather</td> <td>1972</td> <td>9.2</td> </tr> <tr> <td>Steven Spielberg</td> <td>Schindler List</td> <td>1993</td> <td>8.9</td> </tr> <tr> <td>Sidney Lumet</td> <td>12 Angry Men</td> <td>1957</td> <td>8.9</td> </tr> <tr> <td>Robert Benigni</td> <td>Life Is Beautiful</td> <td>1997</td> <td>8.6</td> </tr> <tr> <td>Sergio Leone</td> <td>The Good, the Bad and the Ugly</td> <td>1966</td> <td>8.8</td> </tr> <tr> <td>Frank Darabont</td> <td>The Shawshank Redemption</td> <td>1994</td> <td>9.3</td> </tr> <tr> <td>Bautista</td> <td>The Pursuit of Happyness</td> <td>2006</td> <td>8.0</td> </tr> </tbody> </table> </div>
Это результат, который я получаю, и он выполняет мою работу.
Ответ №15
Вы можете разместить два 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> Ответ №16
Вот моя копия, как сделать заголовок фиксированной таблицы с прокручиваемыми строками и столбцами. Столбцы также имеют фиксированную ширину,
<!— 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; } Ответ №17
Для чего бы это ни стоило сейчас: я опубликовал решение для прокрутки Table -thread- Table с HTML и CSS, которое
- занимает две таблицы (одна только для заголовка, одна для всех – выложенная браузером)
- после компоновки отрегулируйте верхнюю (только для заголовка) таблицу по ширине нижней
- скрыть (visibility, не display) заголовок нижней таблицы и сделать прокрутку нижней таблицы ж/в div
Решение не зависит от любых используемых стилей/фреймворков – так что, может быть, оно будет полезно и здесь…
Подробное описание приведено в разделе ” Прокрутка таблиц с использованием HTML и CSS”. Код также находится в этом пере: .
Ответ №18
Чистое решение (только 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 Ответ №19
Теперь, когда “все” браузеры поддерживают ES6, я включил различные предложения, приведенные выше, в класс JavaScript, который принимает таблицу в качестве аргумента и делает тело прокручиваемым. Это позволяет механизму макета браузера определять ширину заголовка и ячейки тела, а затем сопоставлять ширину столбцов.
Высота таблицы может быть установлена явно или сделана так, чтобы заполнять оставшуюся часть окна браузера, и обеспечивает обратные вызовы для таких событий, как изменение размера области просмотра и/или открытие или закрытие элементов details.
Доступна поддержка многострочных заголовков, и она особенно эффективна, если таблица использует атрибуты id/headers для доступности, как указано в Руководстве по WCAC, что не является таким обременительным требованием, как может показаться.
Код не зависит от каких-либо библиотек, но хорошо играет с ними, если они используются. (Проверено на страницах, использующих JQuery).
Код и пример использования доступны на Github.
Ответ №20
Использовал эту ссылку, qaru.site/questions/26056/…, с помощью 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%; } } Ответ №21
Я сделал какое-то работающее CSS-решение, используя position: sticky. Должен работать на вечнозеленых браузерах. Попробуйте изменить размер браузера. Все еще есть некоторая проблема с макетом в FF, она будет исправлена позже, но по крайней мере заголовки таблиц обрабатывают вертикальную и горизонтальную прокрутку. Пример Codepen
Ответ №22
HTML
<!DOCTYPE html> <html> <head> <title>RoboPage</title> <link rel=»stylesheet» type=»text/css» href=»practice.css»> <link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css» integrity=»sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T» crossorigin=»anonymous»> </head> <body> <div class=»container»> <table class=»table»> <thead> <tr> <th class=»col-md-3 col-sm-3 «>First Name</th> <th class=»col-md-3 col-sm-3 «>Last Name</th> <th class=»col-md-6 col-sm-6 «>E-mail</th> </tr> </thead> <tbody> <tr> <td class=»col-md-3 col-sm-3″>Top Row</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> <tr> <td class=»col-md-3 col-sm-3″>John</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> <tr> <td class=»col-md-3 col-sm-3″>John</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> <tr> <td class=»col-md-3 col-sm-3″>John</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> <tr> <td class=»col-md-3 col-sm-3″>John</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> <tr> <td class=»col-md-3 col-sm-3″>John</td> <td class=»col-md-3 col-sm-3″>Doe</td> <td class=»col-md-6 col-sm-6″>johndoe@email.com</td> </tr> </tbody> </table> </div> <script src=’practice.js’></script> <script src=»https://code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»></script> <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js» integrity=»sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=»anonymous»></script> <script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js» integrity=»sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM» crossorigin=»anonymous»></script> </body> </html>
CSS
thead,tbody,tr,td,th{ display:block; } tbody{ height:200px; overflow-y:auto; width: 100%; } thead > tr > th, tbody > tr > td{ float:left; } Ответ №23
Поддержка нескольких прокручиваемых таблиц в одном окне.
Чистый CSS & Не фиксированный или липкий.
Я ищу фиксированный заголовок таблицы с автоматическими “td” и “th” шириной в течение многих лет. Наконец я что-то кодировал, это хорошо работает для меня, но я не уверен, что это работает хорошо для всех.
Проблема 1: Мы не можем установить высоту таблицы или tbody, пока у нас есть тонны “tr” из-за свойств таблицы по умолчанию.
Решение: Установите для таблицы свойство отображения.
Проблема 2: Когда мы устанавливаем свойство отображения, ширина элементов “td” не может быть равна ширине элементов “th”. И трудно заполнить элементы правильно в таблице полной ширины, как 100%.
Решение: CSS “flex” является очень хорошим решением для настроек ширины и заполнения, поэтому мы будем создавать наши элементы tbody и thead с помощью CSS “flex”.
.ea_table { border: 1px solid #ddd; display: block; background: #fff; overflow-y: hidden; box-sizing: border-box; float: left; height:auto; width: 100%; } .ea_table tbody, thead { flex-direction: column; display: flex; } .ea_table tbody { height: 300px; overflow: auto; } .ea_table thead { border-bottom: 1px solid #ddd; } .ea_table tr { display: flex; } .ea_table tbody tr:nth-child(2n+1) { background: #f8f8f8; } .ea_table td, .ea_table th { text-align: left; font-size: 0.75rem; padding: 1.5rem; flex: 1; }<table class=»ea_table»> <thead> <tr> <th>Something Long</th> <th>Something </th> <th>Something Very Long</th> <th>Something Long</th> <th>Some</th> </tr> </thead> <tbody> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem </td> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> </tbody> </table>
Ответ №24
Этого легко достичь с помощью таблиц div.
.td.header { position: sticky; top:0px; }
Проверьте этот jsfiddle для простого примера.
Ответ №25
поместите таблицу внутри div таким образом, чтобы сделать таблицу с возможностью прокрутки вертикально. измените overflow-y на overflow-x чтобы сделать таблицу прокручиваемой по горизонтали. просто overflow чтобы сделать таблицу прокручиваемой как горизонтальной, так и вертикальной.
<div style=»overflow-y: scroll;»> <table> … </table> </div> Ответ №26table { display: block; } thead, tbody { display: block; } tbody { position: absolute; height: 150px; overflow-y: scroll; } td, th { min-width: 100px !important; height: 25px !important; overflow:hidden !important; text-overflow: ellipsis !important; max-width: 100px !important; }<link href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css» rel=»stylesheet»/> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js»></script> <div class=»container» style=»position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden»> <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Username</th> <th>Password</th> <th>First Name</th> <th>Last Name</th> <th>Col16</th> <th>Col7</th> <th>Col8</th> <th>Col9</th> <th>Col10</th> <th>Col11</th> <th>Col12</th> <th>Col13</th> <th>Col14</th> <th>Col15</th> <th>Col16</th> <th>Col17</th> <th>Col18</th> </tr> </thead> <tbody> </tbody> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> </table> </div>’enter code here’
