Bootstrap 4 таблица отзывчивая, горизонтальная и вертикальная прокрутка
Я использую bootstrap таблицы с Angular 6 в проекте, и мне удалось создать вертикальную таблицу прокрутки-тело с этим кодом:
<table class="table table-striped table-bordered" style="margin-bottom: 0">
<thead> <!-- Column names -->
<tr>
<th scope="col">#</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
...
<th scope="col">Col N</th>
</tr>
</thead>
<tbody> <!-- Data -->
<tr>
<th scope="row">1</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
<tr>
<th scope="row">2</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
...
<tr>
<th scope="row">n</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
</tbody>
</table>
И css:
tbody {
display:block;
max-height:500px;
overflow-y:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
Но теперь, если есть много столбцов, это не выглядит хорошо.
Поэтому я хотел добавить горизонтальный свиток, чтобы я мог прокручивать всю таблицу по горизонтали и только тело таблицы по вертикали.
Чтобы сделать горизонтальный свиток, я использовал .таблица-реагирует следующим образом:
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
Но это работает только без вертикальной прокрутки в css.
Я хочу объединить эти два способа прокрутки таблицы.
Я изменил значения ширины в css части, от 100% до статических значений px, как это:
...
thead, tbody tr {
display:table;
width: 2000px;
table-layout:fixed;
}
thead {
width: calc( 2000px - 1em )
}
И это сработало, но мне нужно установить статическую ширину, и я не знаю, как я могу сделать это динамически (в зависимости от количества столбцов).
1 ответ:
Я исправил это следующим образом: Сначала я редактирую css, я удалил часть thead, и я добавил часть тела, как это:
body { --table-width: 100%; /* Or any value, this will change dinamically */ } tbody { display:block; max-height:500px; overflow-y:auto; } thead, tbody tr { display:table; width: var(--table-width); table-layout:fixed; }Я тоже ушел .таблица-отзывчивый div:
<div class="table-responsive"> <table class="table table-striped table-bordered" style="margin-bottom: 0"> ... </table> </div>Затем я вычисляю -- ширину таблицы в зависимости от количества столбцов и длины самого длинного имени столбца. Я делаю это с угловой, в моем компоненте .ts:
calculateTableWidth() { // Get the table container width: const pageWidth = document.getElementById('tableCard').offsetWidth; // Get the longest column name const longest = this.tableColumns.sort(function (a, b) { return b.length - a.length; })[0]; // Calculate table width let tableWidth = this.tableColumns.length * longest.length * 14; // If the width is less than the pageWidth if (tableWidth < (pageWidth - 10)) { // We set tableWidth to pageWidth - scrollbarWidth (10 in my project) tableWidth = pageWidth - 10; } // Then we update the --table-width variable: document.querySelector('body').style.cssText = '--table-width: ' + tableWidth + 'px'; }Мне нужно запустить calculateTableWidth () в начале в ngOnInit () (или когда я определил массив tableColumns), а затем, когда я изменю размер окно:
ngOnInit() { this.tableColumns = this.myAppService.getTableColumnsNames(); this.calculateTableWidth(); } @HostListener('window:resize', ['$event']) onResize(event: any) { this.calculateTableWidth(); }И вот как я это исправил, теперь у меня есть красивый стол, с вертикальной и горизонтальной прокруткой.
Если у вас есть лучший способ сделать это, пожалуйста, опубликуйте свое решение. Спасибо!
Comments