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.
<!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:
- After clicking the button:
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:
- After clicking the button:
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:
- After clicking the button:
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:
- After clicking the button:
Supported Browsers: The browser supported by tableLayout property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
