CSS Property: table-layout
[this page | pdf | back links]
The CSS (CSS2) table-layout property indicates the
algorithm used to define the table layout.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
auto
|
(default value). Layout
set automatically, with column width set by widest unbreakable content. This
can render more slowly as it means all content needs to be read before the
layout can be determined)
|
|
fixed
|
Layout set only by
reference to table’s width and width of columns, i.e. not by what is in each
cell. This can render faster as the browser can begin to display the table as
soon as the first row has been received
|
|
Default Value:
|
auto
|
|
JavaScript syntax:
|
e.g. object.style.tableLayout="fixed"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table {width: 200px; border: thin solid red}
td {border: thin solid green}
table.x1 {table-layout: fixed;}
</style>
</head>
<body>
<table><tr><td>Element with default property</td>
<td>A</td></tr></table><br>
<table class="x1"><tr><td>Element with property set by HTML</td>
<td>A</td></tr></table><br>
<table id="x2"><tr><td>Element with property set by JavaScript</td>
<td>A</td></tr></table>
<script>
var x = document.getElementById("x2");
x.style.tableLayout="fixed";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyTableLayout() {
var x = document.createElement("DIV"); x.style.tableLayout = "fixed"; return (window.getComputedStyle(x, null).tableLayout == "fixed");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties