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
Recommended Posts:
- HTML | DOM Style top Property
- HTML | DOM Style right Property
- HTML | DOM Style overflowY Property
- HTML | DOM Style alignSelf Property
- HTML DOM | Style pageBreakAfter Property
- HTML | DOM Style columnCount Property
- HTML | DOM Style padding Property
- HTML | DOM Style borderTopLeftRadius Property
- HTML | DOM Style columnSpan Property
- HTML | DOM Style outlineStyle Property
- HTML | DOM Style orphans Property
- HTML | DOM Style boxShadow Property
- HTML | DOM Style userSelect Property
- HTML | DOM Style transformOrigin Property
- HTML | DOM Style perspectiveOrigin Property
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.