HTML DOM Style tableLayout Property

The HTML DOM Style tableLayout property returns and modify the way table cells, rows, and columns are lay in an HTML document.

Syntax

Following is the syntax −

1. Returning tableLayout

object.tableLayout

2. Modifying tableLayout

object.tableLayout = “value”

Here value can be −

Value	Explanation
initial	It set this property value to its default value.
inherit	It inherits this property value from its parent element.
fixed	It sets the column width based on the width of the column and table.
auto	It sets the column width based on the width of the widest unbreakable content in the table.

Let us see an example of HTML DOM Style tableLayout Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   table {
      margin: 2rem auto;
      width: 400px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>DOM Style tableLayout Property Demo</h1>
<table border="2">
<caption>Student Entry</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>041717</td>
</tr>
</table>
<button onclick="show()" class="btn">Set tableLayout</button>
<script>
   function show() {
      document.querySelector('table').style.tableLayout = "fixed";
   }  
</script>
</body>
</html>

Output

HTML DOM Style tableLayout Property

Click on “Set tableLayout” button to set tableLayout with fixed value −

HTML DOM Style tableLayout Property