Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style tableLayout Property

  • Difficulty Level : Basic
  • Last Updated : 02 Aug, 2019

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.




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




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




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




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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :