CSS - table-layout Property

Quiz

The table-layout property allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

Possible Values

auto − The table should be laid out according to some automatic layout algorithm. The browser will calculate the width of columns and cells based on their content.
fixed − The table should be laid out according to the provided fixed-table layout method.

Applies to

All the elements with a display of table or inline-table.

DOM Syntax

object.style.tableLayout = "fixed";

Example

<html>
<head>
<style>
  table.auto {
    table-layout: auto;
    border-collapse: collapse;
  }
    table.fixed {
    table-layout: fixed;
    border-collapse: separate;
  }
</style>
</head>
<body>
  <div>
    <h2>table-layout: auto</h2>
    <table class = "auto" border = "1" width = "100%">
      <tr>
      <td>1000000000000000000000000000</td>
      <td>10000000</td>
      <td>100</td>
      </tr>
      </table>
      </div>
      <div>
      <h2>table-layout: fixed</h2>
      <table class = "fixed" border = "1" width = "100%">
      <tr>
      <td>1000000000000000000000000000</td>
      <td>10000000</td>
      <td>100</td>
      </tr>
    </table>
  </div>
</body>
</html>

Print Page