table-auto

[awb99]

No description provided.

[awb99]

table-layout
Possible values: auto, fixed

auto is the default. The width of the table and its cells depends on the content inside.

If you change this to fixed, the table and column widths are set by the widths of table and col elements or by the width of the first row of cells.

[awb99]

Table Layout

Utilities for controlling the table layout algorithm.

Quick reference

Class	Properties
table-auto	table-layout: auto;
table-fixed	table-layout: fixed;

Table Layout Utilities for controlling the table layout algorithm.

Quick reference
Class
Properties
table-auto table-layout: auto;
table-fixed table-layout: fixed;

[awb99]

Above is from tailwind

[awb99]

width of the

element to 100% or the maximum width required, we can make the table scrollable when the screen size or table wrapper becomes smaller than the table’s width, thus preventing the table from distorting the layout of the page:

<style> .table-wrapper { width: 100%; /* max-width: 500px; */ overflow-x: auto; }

[awb99]

Here’s an example of a data table with truncated cells:

th,
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td:first-child {
min-width: 200px;
max-width: 200px;
}