CSS Table Layout Properties Tutorial

Html copy reset

Netbax Online Editor Try it Yourself

th,td {
  border: 2px solid black;
}

.one {
  table-layout: absolute;
  width: 300px;  
}

.two {
  table-layout: auto;
  width: 100%;  
}

.three {
  table-layout: fixed;
  width: 100%;  
}
</style>

<h2>Css Table Layout Property</h2>

<h2>Fixed - width: 300px</h2>
<table class="one">
  <tr>
    <th>Example Text</th>
    <th>Example Text</th>
    <th>Example Text</th>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
</table>

<h2>Auto - width: 100%</h2>
<table class="two">
  <tr>
    <th>Example Text</th>
    <th>Example Text</th>
    <th>Example Text</th>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
</table>

<h2>Absolute - width: 100%</h2>
<table class="three">
  <tr>
    <th>Example Text</th>
    <th>Example Text</th>
    <th>Example Text</th>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
  <tr>
    <td>Example Text</td>
    <td>Example Text</td>
    <td>Example Text</td>
  </tr>
</table>