Skip to content
Related Articles

Related Articles

HTML | DOM Style tableLayout Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • 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>

Output:

  • Before clicking the button:

 inherit-before

  • After clicking the button:

 inherit-after

Supported Browsers: The browser supported by tableLayout property are listed below:

  • Google Chrome 14
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 7
  • Apple Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!