Definition
The table-layout CSS property is used to control the algorithm used to calculate the width of table cells and the overall layout of a table. It determines how the table should distribute available space and handle cell content that exceeds the specified width.
The table-layout property accepts two values:
-
auto: This is the default value. The browser automatically calculates the width of table columns based on the content and the table’s overall width. It may also adjust the column widths dynamically as the content changes or when the table is resized. -
fixed: The browser assigns a fixed width to each column based on the first row of the table or the specified column widths. The width of the columns remains constant, regardless of the content within them.
Here’s an example:
.table-layout-example {
table-layout: fixed;
}
In this example, the .table-layout-example class sets the table-layout property to fixed, indicating that the table should have a fixed layout. The column widths will be determined by the first row of the table or by the specified widths, and they will not change dynamically based on the content.
When table-layout is set to fixed, you can control the width of specific columns using the width property on the <col> or <colgroup> elements within the table markup.
It’s important to note that when table-layout is set to fixed, long cell content may overflow and be hidden if it exceeds the specified column width. You can prevent this by applying appropriate CSS properties, such as overflow: auto or text-overflow: ellipsis, to the table cells.
The table-layout property is commonly used when you need to create tables with a fixed layout, especially when precise control over column widths is required. It can be helpful for displaying tabular data consistently across different devices and screen sizes.