HTML DOM tableLayout Property
 Complete Style Object Reference
Definition and Usage
The tableLayout property sets the algorithm used to display the table cells,
rows, and columns
Fixed table layout:
- The fixed table layout allows the browser to lay out the table faster
than the automatic table layout
- In a fixed table layout, the horizontal layout only depends
on the table's width, the width of the columns, and not the content of the cells
- By using the fixed table layout, the user agent can begin to display
the table once the entire first row has been received
Automatic table layout:
- In an automatic table layout, the column width is set by the widest
unbreakable content in the column cells
- This algorithm is sometimes slow since it needs to access all the
content in the table before determining the final layout
Syntax
Object.style.tableLayout=automatic|fixed
|
Possible Values
| Value |
Description |
| automatic |
Default. Column width is set by cell content |
| fixed |
Column width is set by table width and the width of the
columns |
Example
The following example sets a fixed table layout:
<html>
<head>
<script type="text/javascript">
function setFixedTableLayout()
{
document.getElementById('myTable').style.tableLayout="fixed";
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<col width="20%"><col width="40%"><col width="40%">
<tr>
<td>1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>
<input type="button" onclick="setFixedTableLayout()"
value="Set fixed table layout">
</body>
</html>
|
Try-It-Yourself Demos
Change the layout of a table (tableLayout)
Complete Style Object Reference
 |
|
|
See why there are 20,000+ Ektron integrations worldwide.
Request an INSTANT DEMO or download a FREE TRIAL today. |
|
|
|
