CSS table-layout Property

February 10, 2021 12:37 pm IST

You are Here:

CSS table-layout Property

CSS table-layout property sets the algorithm used to lay out <table> cells, rows, and columns.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> table, td, th{ border: 1px solid black; } table{ width: 200px; } #point{ table-layout: auto; } #point1{ table-layout: fixed; } </style> </head> <body> <h1>CSS table-layout Property</h1> <h2>table-layout: auto;</h2> <table id="point"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Joseph Charles Buttler</td> <td>28</td> </tr> <tr> <td>Alex Tyson Carey</td> <td>34</td> </tr> </table> <h2>table-layout: fixed;</h2> <table id="point1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Joseph Charles Buttler</td> <td>28</td> </tr> <tr> <td>Alex Tyson Carey</td> <td>34</td> </tr> </table> </body> </html>

Run

Syntax

Using CSS

element{ table-layout: fixed; }

Using Javascript

object.style.tableLayout="fixed";

Animatable

Yes, table-layout property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS table-layout property is auto.

Property Value

The following table provides a list of values for CSS table-layout property.

Value	Explanation
auto	The widths of the table and its cells are adjusted to fit the content. By default, most browsers use an automatic table layout algorithm.
fixed	Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Using JavaScript

In the following example, we will demonstrate how to change the CSS table-layout property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> table, td, th{ border: 1px solid black; } table{ width: 200px; } </style> </head> <body> <h1>CSS table-layout Property</h1> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Joseph Charles Buttler</td> <td>28</td> </tr> <tr> <td>Alex Tyson Carey</td> <td>34</td> </tr> </table> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("table")[0]; function myFunction(){ x.style.tableLayout = "fixed"; } </script> </body> </html>

Run