table-layout

Overview

W3C

Properties

background

background-attachment

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

CSS2


                                table-layout: auto | fixed | inherit

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

Note: Doctype is required for Internet Explorer 8+

Values
DOM
Example | Values | auto
Example | Values | fixed
Example | DOM
Reference


                                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
inherit	Takes the same computed value as the property for the element's parent


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

<!doctype html>
<html>
  <head>
    <title>table-layout</title>
  </head>
  <body>
    <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>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.tableLayout = "auto";
    }
    function mouseover2() {
      document.getElementById("id1").style.tableLayout = "fixed";
    }
    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";
  </script>
</html>

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

CSS

Values

DOM

Example | Values | auto

Example | Values | fixed

Example | DOM

Reference