The DOM Style tableLayout property is used to set or return how a table and its cells, rows, and columns should be laid out.
Syntax:
- It returns the tableLayout Property
object.style.tableLayout
- It used to set the tableLayout Property
object.style.tableLayout = "auto | fixed | initial | inherit"
Return Values: It returns a string value, which represents the table layout algorithm used for a table.
Property Values:
- fixed: This value is used to set the column width on the basis of the width of the table and irrespective of the content.
- auto: This value is used to set the width of table and columns on the basis of the widest unbreakable content in the cells. This is the default value.
- initial: This is used to set this property to its default value.
- inherit: This inherits the property from its parent.
Example 1: Using the fixed value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style tableLayout property
</ title >
< style >
table,
td {
border: 1px solid;
}
#table1 {
width: 100%;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style tableLayout
</ b >
< table id="table1">
< tr >
< td >GeeksforGeeks is a
computer science portal.</ td >
< td >DOM Style tableLayout</ td >
</ tr >
< tr >
< td >Article 1</ td >
< td >Article 2</ td >
</ tr >
< tr >
< td >Article 3</ td >
< td >Article 4</ td >
</ tr >
</ table >
< button onclick="changetableLayout()">
Change tableLayout
</ button >
< script >
function changetableLayout() {
document.querySelector(
"#table1").style.tableLayout =
"fixed";
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:

- After clicking the button:

Example 2: Using the auto value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style tableLayout property
</ title >
< style >
table,
td {
border: 1px solid;
}
#table1 {
width: 100%;
table-layout: fixed;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >
DOM Style tableLayout
</ b >
< table id="table1">
< tr >
< td >GeeksforGeeks is a
computer science portal.</ td >
< td >DOM Style tableLayout</ td >
</ tr >
< tr >
< td >Article 1</ td >
< td >Article 2</ td >
</ tr >
< tr >
< td >Article 3</ td >
< td >Article 4</ td >
</ tr >
</ table >
< button onclick="changetableLayout()">
Change tableLayout
</ button >
< script >
function changetableLayout() {
document.querySelector(
"#table1").style.tableLayout =
"auto";
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:

- After clicking the button:

Example 3: Using the initial value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style tableLayout property
</ title >
< style >
table,
td {
border: 1px solid;
}
#table1 {
width: 100%;
table-layout: fixed;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >DOM Style tableLayout</ b >
< table id="table1">
< tr >
< td >GeeksforGeeks is a
computer science portal.</ td >
< td >DOM Style tableLayout</ td >
</ tr >
< tr >
< td >Article 1</ td >
< td >Article 2</ td >
</ tr >
< tr >
< td >Article 3</ td >
< td >Article 4</ td >
</ tr >
</ table >
< button onclick="changetableLayout()">
Change tableLayout
</ button >
< script >
function changetableLayout() {
document.querySelector(
"#table1").style.tableLayout =
"initial";
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:

- After clicking the button:

Example 4: Using the inherit value.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
DOM Style tableLayout property
</ title >
< style >
#parent {
table-layout: fixed;
}
table,
td {
border: 1px solid;
}
#table1 {
width: 100%;
}
</ style >
</ head >
< body >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< b >DOM Style tableLayout</ b >
< div id="parent">
< table id="table1">
< tr >
< td >GeeksforGeeks is a
computer science portal.</ td >
< td >DOM Style tableLayout</ td >
</ tr >
< tr >
< td >Article 1</ td >
< td >Article 2</ td >
</ tr >
< tr >
< td >Article 3</ td >
< td >Article 4</ td >
</ tr >
</ table >
</ div >
< button onclick="changetableLayout()">
Change tableLayout
</ button >
< script >
function changetableLayout() {
document.querySelector(
"#table1").style.tableLayout =
"inherit";
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:

- After clicking the button:

Supported Browsers: The browser supported by tableLayout property are listed below:
- Google Chrome 14
- Edge 12
- Internet Explorer 5
- Firefox 1
- Opera 7
- Apple Safari 1