HTML DOM Style tableLayout Attribute

-- Learning is not just about technology, it is also about dreams!

JavaScript Reference Manual

Overview

JavaScript Objects
JavaScript Array Object
JavaScript Boolean Object
JavaScript Date Object
JavaScript Math Object
JavaScript Number Object
JavaScript String Object
JavaScript RegExp Object
JavaScript Global Attributes/Functions
JavaScript Operators
JavaScript Error

Browser Objects

Window Object
Navigator Object
Screen Object
History Object
Location Object
Storage Object

DOM Objects

HTML DOM Document Object
HTML DOM Element Object
HTML DOM Attribute Object
HTML DOM Event Object
HTML DOM Console Object
CSSStyleDeclaration Object
DOM HTMLCollection

HTML Objects

<a>
<area>
<audio>
<base>
<blockquote>
<body>
<button>
<canvas>
<col>
<colgroup>
<datalist>
<del>
<details>
<dialog>
<embed>
<fieldset>
<form>
<iframe>
<frameset >
<img>
<ins>
<input> - button
<input> - checkbox
<input> - color
<input> - date
<input> - datetime
<input> - datetime-local
<input> - email
<input> - file
<input> - hidden
<input> - image
<input> - month
<input> - number
<input> - range
<input> - password
<input> - radio
<input> - reset
<input> - search
<input> - submit
<input> - text
<input> - time
<input> - url
<input> - week
<keygen>
<link>
<label>
<legend>
<li>
<map>
<menu>
<menuItem>
<meta>
<meter>
<object>
<ol>
<optgroup>
<option>
<param>
<progress>
<q>
<script>
<select>
<source>
<style>
<table>
<td>
<th>
<tr>
<textarea>
<title>
<time>
<track>
<video>
<source>

HTML DOM Table Object

Style tableLayout Attribute

Style Object

Definition and Usage

The tableLayout property sets or returns the rendering algorithm rule for table cells, rows, and columns.

Syntax

Set tableLayout property:

Object.style.tableLayout="automatic|fixed|inherit"

Return tableLayout property:

Object.style.tableLayout

Value	Description
auto	Default. Column width is determined by cell content. This layout can sometimes be slow because it requires accessing all content before the table is fully displayed.
fixed	Column width is determined by table width and column width (not by cell content). Fixed layout is faster than auto layout because the user agent can display the table after receiving the first row.
inherit	The value of the tableLayout property is inherited from the parent element.

Browser Support

All major browsers support the tableLayout property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if !DOCTYPE is specified. IE9 supports "inherit".

Example

Set fixed table layout:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>()</title>
<script>
function displayResult(){
    document.getElementById("myTable").style.tableLayout="fixed";
}
</script>
</head>
<body>

<table id="myTable" width="300" border="1">
    <thead>
        <th>Table Header</th>
        <th>Table Header</th>
    </thead>
    <tbody>
    <tr>
            <td>This is some text. This is some text.</td>
            <td>This is other text</td>
    </tr>
    </tbody>
</table>
<br>
<button type="button" onclick="displayResult()">Set fixed table layout</button>

</body>
</html>

Try it yourself »

YouTip

Prop Style Tablelayout