Javascript Reference - HTML DOM Style tableLayout Property

The tableLayout property sets or gets how to lay out table cells, rows, and columns.

Browser Support


`tableLayout`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the tableLayout property:

var v = object.style.tableLayout

Set the tableLayout property:

object.style.tableLayout='automatic|fixed|initial|inherit'

Property Values

Value	Description
auto	Default value. Set the column width by the widest unbreakable content
fixed	Based on the table's width and the width of the columns, not the table contents
inherit	Inherit the table-layout property from the parent element

Technical Details

Default Value:	auto
Return Value:	A string representing the table layout algorithm used for a table
CSS Version	CSS2

Example

The following code shows how to set a fixed table layout:


<!DOCTYPE html>
<html>
<head>
<style> 
table, td {<!--from www.j a  va2  s. c o  m-->
    border: 1px solid black;
}

#myTABLE {
    width: 100%;
}
</style>
</head>
<body>

<button onclick="myFunction()">test</button>

<table id="myTable">
  <tr>
    <td>1000000000000000000000000000</td>
    <td>aaaaaaaaa</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

<script>
function myFunction() {
    document.getElementById("myTable").style.tableLayout = "fixed";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the table layout value


<!DOCTYPE html>
<html>
<head>
<style> 
table, td {<!--from  w ww  . ja v a  2 s . co m-->
    border: 1px solid black;
}

#myTable {
    width: 100%;
}
</style>
</head>
<body>

<table id="myTable" style="table-layout:fixed;">
  <tr>
    <td>1000000000000000000000000000</td>
    <td>2222222</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").style.tableLayout);
}
</script>

</body>
</html>

The code above is rendered as follows: