Tables
table-layout
table-layout sets whether table column widths come from the contents of the cells, or only from the table width and the first row.
Syntax
auto | fixedPreview
| 個数 | |
|---|---|
| りんご（ふじ） | 3 |
| みかん | 5 |
Presets
Drag the bottom-right corner to resize
Code
.box {
table-layout: fixed;
}Controls
table-layoutfixed
| 個数 | |
|---|---|
| りんご（ふじ） | 3 |
| みかん | 5 |
About
Values
auto: the initial value. Column widths are based on the contents of every cell, so columns with longer contents get wider.fixed: column widths come only from the table width and the widths set on columns (colelements) or first-row cells, ignoring the contents. Columns without a set width share the remaining width equally. Contents that do not fit wrap or overflow.
Because fixed only looks at the first row, the column widths are settled before the remaining rows are examined, even in long tables.
Things to watch
fixedonly applies when the table'swidthis something other thanautoormax-content. A table without a set width behaves as withauto.- It is not inherited, so write it on the
tableelement.
The preview stretches the table inside the box to the box's width (width: 100%) and gives it inherit so it takes the value written on the box. The first column holds a long name, so with auto the first column widens, and with fixed both columns get the same width and the name wraps.