Javascript DOM CSS Style tableLayout Property

Introduction

Set a fixed table layout:

document.getElementById("myTable").style.tableLayout = "fixed";

Click the button to set table-layout property of the TABLE to "fixed":

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}

#myTABLE {/*from ww  w.j  a v  a 2  s .  c  o m*/
  width: 100%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<table id="myTABLE">
  <tr>
    <td>1000000000000000000000000000</td>
    <td>10000000</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>C++</td>
  </tr>
</table>

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

</body>
</html>

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

Property Values

Value	Description
auto	Column width is set by the widest unbreakable content. `default`.
fixed	Column width is set by the width of table and columns, not the content of the cells
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The tableLayout property returns a String representing the table layout algorithm used for a table.

Previous Next