HTML | DOM Style tableLayout Property

Last Updated : 05 Aug, 2022

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:

fixed-before

After clicking the button:

fixed-after

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:

auto-before

After clicking the button:

auto-after

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:

initial-before

After clicking the button:

initial-after

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>