html.okpython.net
Основы создания сайтов
CSS :: Свойство table-layout
css-свойство table-layout (от англ. table layout – макет таблицы) управляет процессом формирования браузером макета таблицы, точнее ширины ячеек.
Характеристики
Синтаксис
table-layout: auto | fixed
Значения
- auto – браузер будет загружать всю таблицу, затем анализировать ее содержимое для определения размеров ячеек и только потом отображать ее на странице.
- fixed – данное значение правильно срабатывает только, если задана ширина таблицы, позволяя быстрее сформировать ее макет. Действует оно следующим образом: если ширина колонки или ячейки не задана, то браузер будет вычислять ширину на основе первой строки таблицы, при чем вычисленная ширина будет уже фиксированной, и если содержимое ячейки не будет помещаться в указанную ширину, то в зависимости от браузера оно будет либо обрезано, либо будет отображаться поверх таблицы (налезать на соседние ячейки или выходить за пределы таблицы); если браузер по каким-то причинам не сможет получить информацию о размерах колонок первой строки таблицы, он просто разделит таблицу на колонки равной ширины.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/tables.html#propdef-table-layout
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/table-layout
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> table{ width: 100px; margin: 3em; border: 1px solid green; caption-side: top; border-collapse: collapse; table-layout: fixed; } td{ border: 1px solid green; } /* Для первой таблицы */ table:first-child{ table-layout: auto; } /* Для второй таблицы */ table:last-child{ table-layout: fixed; } </style> </head> <body> <table> <caption>table-layout: auto</caption> <tr> <td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td> </tr> <tr> <td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td> </tr> </table> <table> <caption>table-layout: fixed</caption> <tr> <td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td> </tr> <tr> <td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td> </tr> </table> </body> </html>
Пример №1