HTML | DOM Style tableLayout Property

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"

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
    fixed-before
  • After clicking the button:
    fixed-after

Example-2: Using the auto value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
    auto-before
  • After clicking the button:
    auto-after

Example-3: Using the initial value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Before clicking the button:
    initial-before
  • After clicking the button:
    initial-after

Example-4: Using the inherit value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.