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"
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"> w3wiki </ h1 > < b > DOM Style tableLayout </ b > < table id="table1"> < tr > < td >w3wiki 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.
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"> w3wiki </ h1 > < b > DOM Style tableLayout </ b > < table id="table1"> < tr > < td >w3wiki 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.
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"> w3wiki </ h1 > < b >DOM Style tableLayout</ b > < table id="table1"> < tr > < td >w3wiki 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.
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"> w3wiki </ h1 > < b >DOM Style tableLayout</ b > < div id="parent"> < table id="table1"> < tr > < td >w3wiki 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 14
- Edge 12
- Internet Explorer 5
- Firefox 1
- Opera 7
- Apple Safari 1
Contact Us