Style tableLayoutProperty
Style Object
Definition and Usage
The tableLayout property sets or returns the display algorithm rules for table cells, rows, and columns.
Syntax
Set the tableLayout property:
Object.style.tableLayout="automatic|fixed|inherit"
Return the tableLayout property:
Object.style.tableLayout
| Value | Description |
|---|---|
| auto | Default. Column width is set by cell content.
|
| fixed | Column width is set by the table width and column width (not by cell content).
|
| inherit | The value of the tableLayout property is inherited from the parent element. |
Browser Support
All major browsers support the tableLayout property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Set a fixed table layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("myTable").style.tableLayout="fixed";
}
</script>
</head>
<body>
<table id="myTable" width="300" border="1">
<thead>
<th>Table header</th>
<th>Table header</th>
</thead>
<tbody>
<tr>
<td>This is some text. This is some text.</td>
<td>This is some other text</td>
</tr>
</tbody>
</table>
<br>
<button type="button" onclick="displayResult()">Set fixed table layout</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("myTable").style.tableLayout="fixed";
}
</script>
</head>
<body>
<table id="myTable" width="300" border="1">
<thead>
<th>Table header</th>
<th>Table header</th>
</thead>
<tbody>
<tr>
<td>This is some text. This is some text.</td>
<td>This is some other text</td>
</tr>
</tbody>
</table>
<br>
<button type="button" onclick="displayResult()">Set fixed table layout</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions