table-layout

The table-layout property specifies the algorithm used to lay out the table cells, rows, and columns.

CSS2

Syntax
Values
DOM
Example | auto
Example | fixed
Example | DOM
External

Syntax


            table-layout: auto | fixed | inherit

Initial:	auto
Applies To:	table and inline-table elements
Inherited:	no
Percentages:	NA
Media:	visual

Values


            table-layout: value

Value	Description
auto	Determines the width of a column of cells based on the largest unbreakable element in a cell in the column
fixed	Determines the width of a column of cells based on the width set on the table, its columns, and first row of cells

DOM


            [window.]document.getElementById("element-id").style.tableLayout = "table-layout";

Example | auto

Example | fixed

Example | DOM

<!doctype html>
<html>
<head>
  <script>
    function load() {
      document.getElementById("id1").style.border  = "1px solid black";
      document.getElementById("id1").style.width   = "100%";
      document.getElementById("id2").style.border  = "1px solid black";
      document.getElementById("id3").style.border  = "1px solid black";
      document.getElementById("id4").style.border  = "1px solid black";
      document.getElementById("id5").style.border  = "1px solid black";
      document.getElementById("id6").style.border  = "1px solid black";
      document.getElementById("id7").style.border  = "1px solid black";
      document.getElementById("id8").style.border  = "1px solid black";
      document.getElementById("id9").style.border  = "1px solid black";
      document.getElementById("id10").style.border = "1px solid black";
      document.getElementById("id11").style.border = "1px solid black";
      document.getElementById("id12").style.border = "1px solid black";
      document.getElementById("id13").style.border = "1px solid black";
    }
    function mouseover1() {
      document.getElementById("id1").style.tableLayout = "auto";
    }
    function mouseover2() {
      document.getElementById("id1").style.tableLayout = "fixed";
    }
  </script>
</head>
<body onload="load()">
  <a href="/" onmouseover="mouseover1()">auto</a>
  <a href="/" onmouseover="mouseover2()">fixed</a><br>
  <table id="id1">
    <tr>
      <td id="id2">cell wordwordwordwordwordwordwordwordword</td>
      <td id="id3">cell wordword wordword wordword wordword wordword</td>
      <td id="id4">cell word word word word word word word word word word</td>
    </tr>
    <tr>
      <td id="id5">cell</td>
      <td id="id6">cell</td>
      <td id="id7">cell</td>
    </tr>
    <tr>
      <td id="id8">cell</td>
      <td id="id9">cell</td>
      <td id="id10">cell</td>
    </tr>
    <tr>
      <td id="id11">cell</td>
      <td id="id12">cell</td>
      <td id="id13">cell</td>
    </tr>
  </table>
</body>
</html>

External

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification