table-layout property

Description

CSS table-layout represents whether the the width of table columns should be fixed or automatically calculated.

Syntax

table-layout : auto | fixed

Property values

autoDefault

In this auto mode, the width of table columns depends upon the content within table cells.

table-layout: auto;

Try it

fixed

In this fixed mode, the width of table columns does not depend upon the the content of table cells.

The width of columns is calculated from the size of cells present in the first table row. In this case, equal share of space is distributed among the table cells.

table-layout: fixed;

Try it

Applicable to

It applies to table elements.

Preview

Code

CSS

#tableLayout{
border-collapse:collapse;
width:300px;
}
#tableLayout td, #tableLayout th{
border:1px solid rgba(230,230,230,1);	
}

HTML

<table id="tableLayout">
<tr>
<th>Name</th>
<th>Aggregate</th>
<th>Degree</th>
</tr>
<tr>
<th>Chris</th>
<td>70%</td>
<td>BCS</td>
</tr>
<tr>
<th>James</th>
<td>80%</td>
<td>BIT</td>
</tr>

<tr>
<th>John</th>
<td>90%</td>
<td>BSE</td>
</tr>
</table>

CSS3 Properties

Description

Syntax

Property values

Applicable to