HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
Set the width of the table to 100%:
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element.
HTML Table Column Width
To set the size of a specific column, add the style attribute on a <th> or <td> element:
Example
Set the width of the first column to 70%:
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row element:
Example
Set the height of the second row to 200 pixels:
HTML Exercises
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты
Таблица в HTML — это способ вывести на экран данные, упорядочив их в колонки и строки. Каждый элемент в таблице является составной частью и строки, и колонки.
В ячейках HTML таблицы могут храниться такие элементы как: заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Таблицы в HTML: Видео
В этом уроке мы рассмотрим такие вопросы:
- Как создать таблицу в HTML (тег <table>).
- Разделение таблицы на логические части (теги <thead>, <tbody>, <tfoot>).
- Как создать ячейку заголовка столбца таблицы в HTML (тег <th>).
- Как создать строки и ячейки таблицы в HTML (теги <tr> и <td>).
- Как сделать заголовок таблицы в HTML (тег <caption>).
- Как сделать границы таблицы в HTML (атрибут border).
- Как сделать отступ в таблице HTML (атрибуты cellpadding и cellspacing).
- Как объединить ячейки таблицы в HTML (атрибуты colspan и rowspan).
- Как сделать фон таблицы в HTML (атрибут bgcolor).
- Как задать размер таблицы в HTML (атрибуты width и height).
- Группирование строк и столбцов таблицы (теги <colgroup> и <col>).
И так, обо всем по порядку.
Как создать таблицу в HTML
Для того, чтобы добавить таблицу на веб-страницу нужно использовать тег <table>. А для того, чтобы добавить строки и ячейки — теги <tr> и <td>.
Внутри тега <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:
Сохраните созданный файл с расширением .html (Например: index.html).
Вот мы и создали свою первую простую таблицу с одной строкой и двумя ячейками.
Давайте более детально рассмотрим вышеупомянутый код.
- тег <table> — служит контейнером для элементов, определяющих содержимое таблицы.
- тег <tr> — служит контейнером для создания строки таблицы.
- тег <td> — используется в таблицах внутри тегов <tr> для создания ячеек с данными.
Разделение таблицы на логические части
Для разделения таблицы на таблицы на логические части используют теги <thead>, <tbody>, <tfoot>.
Тег <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Он используется для группировки заголовочного содержимого таблицы и соответственно формирует верхний колонтитул таблицы.
В одной таблице допустимо использовать тег <thead> только один раз. Этот элемент должен идти в коде сразу после тега <table> (и после элементов <caption> и <colgroup>, если они есть), но обязательно перед тегами <tbody> и <tfoot>.
Тег <tbody> предназначен для хранения одной или нескольких строк и используется для группировки основного содержимого таблицы. Элемент <tbody> должен быть расположен после тегов <caption> и <colgroup> (если таковые присутствуют), а также после тега <thead>.
Тег <tfoot> предназначен для хранения одной или нескольких строк, которые должны быть отображены внизу таблицы. По сути — это нижний колонтитул таблицы. Элемент <tfoot> должен быть расположен перед элементом <tbody> в таблице. Несмотря на то, что тег <tfoot> в исходном коде определяется до тега <tbody>, браузеры отображают его в самом низу таблицы.
Что даёт нам разделение таблицы на логические части?
Например, у вас очень большая таблица и вы выводите её на печать. В таком случае, браузер обрабатывает код таблицы и формирует её верхний и нижний колонтитул, которые будут напечатаны соответственно в верхней и нижней части каждой страницы. Также браузеры могут использовать вышеупомянутые элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула.
Пример как разделить таблицу на логические части:
Как создать ячейку заголовка столбца таблицы в HTML
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Как правило, текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Это единственное отличие тега <th> от элемента <td>.
Элемент <th> обязательно размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Пример как создать ячейку заголовка столбца таблицы в HTML:
Как создать строки и ячейки таблицы в HTML
Для создания строки таблицы HTML используют элемент <tr>. А для создания ячейки — тег <td>.
Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел <tbody>):
Как сделать заголовок таблицы в HTML
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Пример как сделать заголовок таблицы в HTML:
Как сделать границы таблицы в HTML
Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border=»0″, то таблица будет без рамки. Если же border=»1″, то ширина границы будет равна 1px. Если border=»10″ — то 10px.
Пример как сделать границы таблицы в HTML:
Как сделать отступ в таблице HTML
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.
Пример как сделать отступ в таблице HTML:
Как объединить ячейки таблицы в HTML
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега <td>.
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали.
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.
Пример как объединить ячейки таблицы в HTML по вертикали:
Пример как объединить ячейки таблицы в HTML по горизонтали:
Как сделать фон таблицы в HTML
Атрибут bgcolor устанавливает цвет фона ячейки.
Пример как сделать фон таблицы в HTML:
Как задать размер таблицы в HTML
Атрибут width задает ширину элемента, атрибут height — его высоту. Таким образом, создавая таблицу в HTML, можно указать её ширину, или высоту (при необходимости).
Для этого нам достаточно прописать для элемента table атрибут width=»значение», или height=»значение». Значение может быть указано как в пикселях, так и в процентах.
Пример как установить ширину таблицы в HTML:
Группирование строк и столбцов таблицы
Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.
Тег <col> также задает ширину и другие характеристики одной или нескольких колонок таблицы.
Добавляются эти теги непосредственно после элементов <table> и <caption>.
Таблицы в HTML
В этом уроке мы с вами научимся работать с таблицами в HTML.
Для создания любой таблицы в HTML нужно всего 3 тега. Тег <table> создаёт саму таблицу. Тег <tr> создаёт одну строку внутри таблицы. Тег <td> создаёт одну ячейку внутри строки.
Давайте создадим простейшую таблицу на новой страничке table.html:
В браузере результат будет выглядеть так: 
Как сделать границы таблицы в HTML
По-умолчанию границы таблицы не отображаются. Чтобы сделать это добавим на страничку стили:
CSS-свойство border позволяет задать стиль самой границы, а свойство border-collapse: collapse позволяет "схлопнуть" границы между ячейками. Если этого не сделать, табличка будет иметь довольно криповый вид — попробуйте и убедитесь сами.
Чтобы добавить отступы внутри ячеек добавим к ним свойство padding:
Объединение ячеек в HTML
Зачастую несколько ячеек нужно объединить в одну. Объединять их можно как в строках, так и в столбах.
Объединение ячеек по горизонтали
Для объединения ячеек по горизонтали используется атрибут colspan. Значение этого атрибута устанавливается равным количеству ячеек, на которые нужно расширить ячейку с этим атрибутом. То есть если мы хотим чтобы ячейка расширилась и стала занимать место ещё одной справа, значит этот атрибут будет равен двум.
Попробуем создать вот такую таблицу: 
Для этого добавляем в первой строке одну простую ячейку, потом вторую с атрибутом colspan="2", чтобы она заняла 2 ячейки. А после этого переходим на следующую строку и добавляем 3 простых ячейки:
Объединение ячеек по вертикали
Чтобы объединить ячейки по вертикали нужно воспользоваться атрибутом rowspan. Работает аналогично атрибуту colspan.
Добавляем на первой строке ячейку, расширенную вниз на ещё одну ячейку. Потом на этой же строке добавляем еще пару простых ячеек. Переходим на следующую строку. Здесь место первой ячейки у нас уже занято ячейкой из первой строки. Поэтому просто добавляем две простых ячейки.
Одновременное объединение по вертикали и горизонтали в одной таблице
В реальных ситуациях таблицы такого типа встречаются очень часто. Попробуйте самостоятельно создать следующую таблицу:
Что? Читаете дальше, даже не попытавшись? А ну давайте пробуйте!
Если всё же не получилось, то вот ответ:
Как выровнять таблицу по центру в HTML
Чаще всего нужно выровнять таблицу по центру, хотя изначально она прижата к левой стороне страницы. Для того чтобы этого добиться, нужно задать ей свойство margin со значением auto.
Это приводит к тому, что отступы таблицы вычисляются автоматически. После этого таблица будет находиться по центру страницы.
Как изменить размер таблицы в HTML
Чтобы задать ширину и высоту таблицы можно воспользоваться CSS-свойствами width и height соответственно. Ими можно задать как абсолютные значения в пикселях, так и относительные в процентах (относительно размеров окна браузера). Эти же свойства можно применить отдельно к каждой ячейке/столбцу/строке.
Результат: 
Таблицы! Таблицы? Таблицы…
В статье я покажу стандартную табличную разметку, какие у неё есть альтернативы. Дам пример собственной таблицы и разметки, а также опишу общие моменты её реализации.
Стандартная HTML4 таблица
Когда появилась необходимость в HTML разметке показывать таблицы — изобрели тег <table> .
Что же даёт нам таблица в браузере? Вот несколько основных "фич":
Если мы не указали ширину таблицы/столбцов, то ширина таблицы подстраивается и растягивается, чтобы вместить содержимое любого из столбцов.
В данном случае вычисляется процентное соотношение каждого столбца к общей ширине и каждый столбец растягивается соответственно процентному соотношению.
В первом примере ширина всей таблицы (примерно) = 387px , колонки Company = 206px , колонки Contact = 115px .
В процентах Company = 206px/387px * 100% = 53% , Contact = 115px/387px * 100% = 30% .
Теперь когда содержимое таблицы растянулось, ширина всей таблицы (примерно на моем экране) = 1836px , колонки Company = 982px , колонки Contact = 551px .
В процентах Company = 982px/1836px * 100% = 53% , Contact = 551px/1836px * 100% = 30% .
- Если мы указали ширину таблицы и если указанная ширина меньше чем содержимое, тогда таблица сужается. Но сужается до минимально возможной ширины содержимого.
Можно "дожать" таблицу указав ей CSS свойство table-layout: fixed . Описание к свойству.
Так мы ломаем автоподстройку ширины таблицы и теперь таблица слушается заданных ширин для каждого столбца (или всей таблицы), но зато таблица точно вписывается в указанную ширину.
Если мы не указали ширину столбцов, тогда при "сломанной" таблице, ширина каждого столбца = вся ширина / количество столбцов .
Схлопывание (наложение) границ ячеек/столбцов border-collapse: collapse , если мы указали границы для ячеек. Т.е. в местах соприкосновения ячеек, не будет двойных граничных линий.
Использование стандартной таблицы
Во всех вышеприведенный примерах в разметке таблицы я использовал сокращенную разметку:
Однако можно использовать "каноничную" разметку:
Если нужна таблица без шапки и в то же время нам необходимо контроллировать ширину столбцов:
Чаще всего нам в разметке необходимо получить следующее. У нас есть некий контейнер с заданной шириной или с заданной максимальной шириной. Внутри него мы хотим вписать таблицу.
Если ширина таблицы больше чем контейнер, тогда необходимо показывать скролл для контейнера. Если ширина таблицы меньше чем контейнер, тогда необходимо расширять таблицу до ширины контейнера.
Но ни в коем случае мы не хотим, чтобы таблица сделала наш контейнер шире чем мы задали.
По этой ссылке можно уведеть контейнер с таблицей в действии. Если мы будем сужать контейнер, то в тот момент, когда таблица уже больше не сможет сужаться — появиться скролл.
Подстройка таблицы
Задание ширины таблицы и столбцов
Первая дилемма с которой сталкиваются фронт-энд разработчики — это задавать или не задавать ширину столбцов.
Если не задавать, тогда ширина каждого столбца будет вычисляться в зависимости от содержимого.
Исходя из логики, можно понять, что в этом случае браузеру нужно два прохода. На первом он просто отображает все в таблице, подсчитывает ширину столбцов (мин, макс). На втором подстраивает ширину столбцов в зависимости от ширины таблицы.
Со временем вам скажут что таблица выглядит некрасиво, т.к. один из столбцов слишком широкий и
И самая распространенная "фича":
- это сокращение текста в ячейке с помощью .
Т.е. если текст в ячейке вылазит за ширину колонки, то его необходимо сокращать и в конце добавлять . .
Первое разочарование, что если не задавать ширину столбцов, то сокращение не работает. В этом есть своя логика, т.к. на первом проходе браузер высчитывает мин/макс ширину колонки без сокращения, а тут мы пытаемся сократить текст. Необходимо либо все пересчитать повторно, либо игнорировать сокращение.
Сокращение реализуется просто, необходимо указать CSS свойства для ячейки:
И соответственно задать ширину колонки. По этой ссылке можно увидеть, что все настроено, но сокращение не работает.
В спецификации есть заметка, немного объясняющая, почему сокращение не работает:
Опять же сужаться таблица будет до минимальной ширины содержимого. Но если применить свойство table-layout: fixed то таблица начнёт "слушаться" и сокращение заработает. Но автоподстройка ширины столбцов уже не работает.
Задание прокрутки таблицы
Вышеприведенный пример будет работать со скроллом и пользоваться этим можно. Однако возникает следующее требование:
Вторая дилемма с которой сталкиваются фронт-энд разработчики:
- задание прокрутки/скролла в таблице
В спецификации таблицы есть прямое указание, что тело таблицы может быть с шапкой и подвалом. Т.е. шапка и подвал всегда видимы.
А есть и указание о том, что тело таблицы можно скроллить, а шапка и подвал будут оставаться на месте:
А по факту браузеры этого не делают и скролл для таблицы необходимо придумывать/настраивать вручную.
Есть много способов это сделать, но все они сводяться к тому, что:
- мы не создаем дополнительную разметку и пытаемся прикрутить скролл к тому что есть (к телу таблицы, или оборачиваем в контейнер, а значение ячеек в шапке делаем абсолютно позиционированным)
Можно задать ограниченную высоту телу таблицы. Следующий пример показывает, что можно попробовать задать высоту тела таблицы.
В результате мы ломаем табличное отображение тела таблицы CSS свойством display: block , и при этом необходимо синхронизировать прокрутку шапки с телом таблицы.
- мы создаём дополнительную разметку (составные таблицы) и тогда при прокрутке оригинала мы синхронизируем дополнительную разметку
Этот вариант, где все предлагают/строят решения.
Примеры составных таблиц
Если нам необходима прокрутка тела таблицы, то без составных разметок не обойтись. Все примеры составных таблиц используют свои пользовательские разметки.
Одна из самых известных таблиц Data Tables использует следующую разметку:
Я намеренно сокращаю разметку, чтобы можно было составить общую картину, как выглядит разметка.
Мы видим в разметке две таблицы, хотя для пользователя это "видится" как одна.
Следующий пример React Bootstrap Table, если посмотреть в разметку, использует тоже две таблицы:
Верхняя таблица отображает шапку, нижняя — тело. Хотя для пользователя кажется как будто бы это одна таблица.
Опять же пример использует синхронизацию прокрутки, если прокрутить тело таблицы, то произойдет синхронизация шапки.
А как же так получается, что тело таблицы (одна таблица) и шапка (другая таблица) подстраиваются под ширину контейнера и они никак не разъезжаются по ширине и совпадают друг с другом?
Тут кто как умеет так и синхронизирует, например, вот функция синхронизации ширины из вышеприведенной библиотеки:
Возникает вполне логичный вопрос, а зачем тогда вообще использовать тег <table> , если используется только автоподстройка ширины из стандартной таблицы?
И тут мы окажемся не первыми, некоторые вообще не используют табличную разметку. Например Fixed Data Table или React Table.
Разметка в примерах примерно такая:
Отсюда название fixed table , т.е. для такой разметки мы должны заранее указать ширину всех столбцов (ширину таблицы, иногда и высоту строки). Хотя если мы хотим сокращение текста, все равно необходимо задавать ширину столбцов, даже в обычной таблице.
Следующая таблица Reactabular использует интересный подход в синхронизации.
Автор пошел дальше и сделал прокручиваемым не только тело, но и шапку таблицы. В браузерах которые показывают ползунок скролла — выглядит ужасно, зато в touch браузерах очень классно и функционально.
Если мы скроллим тело таблицы, то происходит синхронизация шапки, а если мы скроллим шапку, то происходит синхронизация тела.
А как же сделать автоподстройку ширины колонки в составной таблице спросите вы? Вот интересный способ использовать дополнительный проход браузера. Например в этой таблице ag Grid можно автоматически рассчитать подходящую ширину столбца.
Реализация собственной таблицы
Получается, что составная таблица требует дополнительной синхронизации между частями, чтобы для пользователя все вместе казалось как одна таблица.
Все составные таблицы (и моя) страдают недостатком, у них нет стандарта как их кастомизировать/настраивать (и это логично, т.к. при реализации отказались от HTML4 таблицы).
Когда ты начинаешь изучать одну составную таблицу, потом начинаешь тратить время на её кастомизацию.
Затем для другого проекта изучаешь другую таблицу (например при переходе с Angular1 на React, или с jQuery на Vue), а кастомизация совсем другая.
Возникает логичный вопрос, а стоит ли потраченное время того? Стоит ли учить снова и снова связку фреймворк-таблица?
Может легче освоить для себя базовые моменты составной таблицы и тогда вы сможете делать свою таблицу на любом фреймворке (Angular/React/Vue/будущее. )? Например, на свою таблицу вы будете тратить 2 дня на старт, потом в течении 30 мин кастомизировать.
А можно подключить готовую фреймворк-таблицу за 30 мин и потом кастомизировать каждую фичу за 1 день.
К премеру, я покажу как сделать свою составную таблицу на React.
- составной, синхронизировать шапку в зависимости от тела таблицы
- подстраивать свою ширину если она меньше ширины контейнера
Дальше будет объяснение только некоторых аспектов разработки, можете сразу посмотреть результат.
Разметка
Для разметки будем использовать div элементы. Если использовать display: inline-block для ячеек, тогда будет следующая разметка:
Но есть одна проблема — браузер (не все браузеры) интерпретирует пустые места между ячейками как текстовые ноды.
Есть отличная статья, как с этим бороться.
И если мы используем шаблонизатор (EJS, JSX, Angular, Vue), то это легко решить:
Однако уже 2017 год, flexbox давно поддерживается, я делал на нем проекты еще в 2014 для IE11.
А сегодня можно вообще не стесняться его. Это упростит нам задачу, можно будет делать столько пустых нод, сколько нужно:
Общие моменты использования
Таблица должна встраиваться в Redux архитектуру, примеры таких таблиц предалагают подключать свои reducers .
Мне этот подход не нравится. По моему мнению, разработчик должен контроллировать процесс сортировки, фильтрации. Это требует дополнительного кода.
Вместо такого "черного ящика", который потом сложно кастомизировать:
разработчик должен будет писать:
Разработчик должен сам прописывать шаги: вычислить описание колонок, отфильтровать, отсортировать.
Все функции/конструкторы getColumnDescriptions, filterBy, sortBy, TableHeader, TableBody, TableColumn будут импортироваться из моей таблицы.
В качестве данных будет использоваться массив объектов:
Мне понравился подход создания описания колонок в jsx в качестве элементов.
Будем использовать ту же идею, однако, чтобы сделать независимыми шапку и тело таблицы, будем вычислять описание один раз и передавать его и в шапку и в тело:
В функции getTableColumns мы создаем описание колонок.
Все обязательные свойства я могу описать через propTypes , но после того как их вынесли в отдельную библиотеку — это решение кажется сомнительным.
Обязательно указываем row — число, которое показывает индекс строки в шапке (если шапка будет группироваться).
Параметр dataField , определяет какой ключ из объекта использовать для получения значения.
Ширина width тоже обязательный параметр, может задаватся как числом или как массивом ключей от которых зависит ширина.
В примере верхняя строка в таблице row= <0>зависит от ширины двух колонок ["Company", "Cost"] .
Элемент TableColumn "фейковый", он никогда не будет отображаться, а вот его содержимое this.props.children — отображается в ячейке шапки.
Разработка
На основе описаний колонок сделаем функцию, которая будет разбивать описания по рядам и по ключам, а также будет сортировать описания по рядам в результирующем массиве:
Теперь обработанные описания передаём в шапку и в тело для отображения ячеек. Шапка будет строить ячейки так:
Тело таблицы будет строить ячейки тоже на основе обработанных описаний колонок:
Тело таблицы использует описания у которых есть свойство dataField , поэтому описания фильтруются используя функцию getCellDescriptions .
Тело таблицы будет слушать события изменения размеров экрана, а также прокрутки самого тела таблицы:
Подстройка ширины таблицы происходит следующим образом.
После отображения берётся ширина контейнера, сравнивается с шириной всех ячеек, если ширина контейнера больше, увеличивается ширина всех ячеек.
Для этого разработчик должен хранить состояние коэффициента ширины (который будет меняться).
Следующие функции реализованы в таблице, однако разработчик может использовать свои. Чтобы использовать уже реализованные, необходимо их импортировать и прилинковать к текущему компоненту:
Функция подстройки ширины:
Функция синхронизация шапки:
Ключевая особенность таблицы для redux — это то, что она не имеет своего внутреннего состояния (она должна иметь состояние, но только в том месте, где укажет разработчик).
И подстройка ширины adjustBody и синхронизация скролла adjustScroll — это функции которые изменяют состояние у прилинкованного компонента.
Внутрь TableColumn можно вставлять любую jsx разметку. Зачастую используются такие варианты: текст, кнопка сортировки и кнопка фильтрации.
Для массива активных сортировок/фильтраций разработчик должен создать состояние и передавать его в таблицу.
Передаем в таблицу массив активных сортировок/фильтраций:
Компонент сортировки SortButton и компонент фильтрации MultiselectDropdown при изменении "выбрасывают" новые активные фильтры/сортировки, которые разработчик должен заменить в состоянии. Массивы activeSorts и activeFilters как раз и предполагают, что возможна множественная сортировка и множественная фильтрация по каждой колонке.
К сожалению, формат статьи не позволяет описать всех тонкостей, поэтому предлагаю сразу посмотреть результат.
Итого разработчику в таблице необходимо:
- автоподстройка ширины таблицы под ширину контейнера
- прокрутка тела таблицы и синхронизация шапки
- сортировка таблицы (возможна множественная сортировка)
- фильтрация таблицы (возможна множественная фильтрация)
Все это я реализовал в примере. Надеюсь теперь, при переходе на новый фреймворк, у вас как минимум появился выбор — брать готовую или сделать свою таблицу.