table-layout

table.test { table-layout: auto;}
table.test1 { table-layout: fixed;}

Value	Description
auto	Automatically determines the width of each cell in the table element based on its content. This 'auto' is the initial value.
fixed	Determines the width of each cell in the table element based on the col element or the width of each cell in the first row, and subsequent rows inherit those widths. If no width is specified for the first row cells, the table is rendered with equal widths. Note that when using 'fixed', the 'width' property must also be specified at the same time.

<table style="table-layout: auto; width: 500px;">
    <tr><th style="border: solid 1px black;">th element 1</th><th style="border: solid 1px black;">th element 2. Text. Text.</th></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element. Text.</td><td style="border: solid 1px black;">This is a td element. Text.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element. Text. Text.</td><td style="border: solid 1px black;">This is a td element. Text. Text. Text.</td></tr>
</table>

<table style="table-layout: fixed; width: 500px;">
    <tr><th style="border: solid 1px black;">th element 1</th><th style="border: solid 1px black;">th element 2. Text. Text.</th></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element. Text.</td><td style="border: solid 1px black;">This is a td element. Text.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element. Text. Text.</td><td style="border: solid 1px black;">This is a td element. Text. Text. Text.</td></tr>
</table>

※ Version data is based on MDN.

Specifies the display method for cell widths in a table element. The 'table-layout' property can be applied to a table element or an element with 'display: table'.

When the value is set to 'auto', the width of each cell is automatically determined based on its content.

When the value is set to 'fixed', the width of each cell in the table element is determined by the col element or the width of the cells in the first row. Note that the 'width' property must also be specified at the same time.

Regarding rendering when the value is 'fixed': if no width is specified for the col element or the cells in the first row, the table is rendered with equal widths, and rows after the first row inherit the widths determined in the first row.

<p>The following is a sample of 'table-layout: <span style="color: #f00">fixed</span>'. The table element size is specified as 500px.</p>
<table style="table-layout: fixed; width: 500px;">
	<tr><th style="border: solid 1px black;">This is a th element. No width is specified, so the width will be equal.</th><th style="border: solid 1px black;">This is a th element. No width is specified, so the width will be equal.</th></tr>
	<tr><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row.</td><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row.</td></tr>
	<tr><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row. Text.</td><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row. Text.</td></tr>
	<tr><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row. Text. Text.</td><td style="border: solid 1px black;">This is a td element. It inherits the width determined in the first row. Text. Text. Text.</td></tr>
</table>

If a width is specified for the col element or the cells in the first row, they are rendered at that size, and rows after the first row inherit the widths specified in the first row.

<p>The following is a sample of 'table-layout: <span style="color: #f00">fixed</span>'. The table element size is specified as 500px.</p>
<table style="table-layout: fixed; box-sizing: border-box; width: 500px;">
	<tr><th style="border: solid 1px black; box-sizing: border-box; width: 200px;">This is a th element. The width is specified as 200px.</th><th style="border: solid 1px black; box-sizing: border-box; width: 300px;">This is a th element. The width is specified as 300px.</th></tr>
	<tr><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row.</td><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row.</td></tr>
	<tr><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row. Text.</td><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row. Text.</td></tr>
	<tr><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row. Text. Text.</td><td style="border: solid 1px black; box-sizing: border-box;">This is a td element. It inherits the width determined in the first row. Text. Text. Text.</td></tr>
</table>

Note that if table cells are not rendering at the intended size or the 'width' property does not seem to take effect, check whether the table element size and the cell sizes are consistent. Regardless of the 'table-layout' property value, if the table element size and the sizes specified for cells do not match, the specified sizes will not be applied.

<p>The following table element size is specified as 500px.</p>
<table style="box-sizing: border-box; width: 500px;">
    <tr><th style="border: solid 1px black; width: 100px;">This is a th element. The width is specified as 100px, but since it does not match the table element's size, the actual width will be larger than specified.</th><th style="border: solid 1px black; width: 200px;">This is a th element. The width is specified as 200px, but since it does not match the table element's size, the actual width will be larger than specified.</th></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
</table>

<p>The following table element size is specified as 500px.</p>
<table style="box-sizing: border-box; width: 500px;">
    <tr><th style="border: solid 1px black; width: 400px;">This is a th element. The width is specified as 400px, but since it does not match the table element's size, the actual width will be smaller than specified.</th><th style="border: solid 1px black; width: 600px;">This is a th element. The width is specified as 600px, but since it does not match the table element's size, the actual width will be smaller than specified.</th></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
    <tr><td style="border: solid 1px black;">This is a td element.</td><td style="border: solid 1px black;">This is a td element.</td></tr>
</table>

By default, border widths and padding are also included in the width calculation, so if you want to render each cell at exactly the size specified by the 'width' property, consider setting the 'box-sizing' property to 'border-box', or setting the 'border-collapse' property to 'collapse'.