Таблицы
Утилиты для управления алгоритмом построения таблицы.
| Class | Styles |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
Используйте утилиту table-auto для автоматического определения ширины столбцов таблицы по содержимому ячеек:
| Песня | Исполнитель | Год |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-auto"> <thead> <tr> <th>Песня</th> <th>Исполнитель</th> <th>Год</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>Используйте утилиту table-fixed, чтобы игнорировать содержимое ячеек таблицы и использовать фиксированную ширину для каждого столбца:
| Песня | Исполнитель | Год |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-fixed"> <thead> <tr> <th>Песня</th> <th>Исполнитель</th> <th>Год</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>Вы можете вручную задать ширину для некоторых столбцов, и оставшаяся доступная ширина будет равномерно распределена между столбцами без явной ширины. Ширина, заданная в первой строке, будет применяться ко всему столбцу.
Префикс a table-layout утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="table-auto md:table-fixed ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.