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