sunweb
Brand
Dev mode

Table

object table

Definition

A simple object for manipulating the structure of HTML `table`s.

o-table
Lorem ipsumLorem
Dolor sit ametIpsum
ConsecteurElit
      <table class="o-table">
        <tr>
          <th>Lorem ipsum</th>
          <th>Lorem</th>
        </tr>
        <tr>
          <td>Dolor sit amet</td>
          <td>Ipsum</td>
        </tr>
        <tr>
          <td>Consecteur elit</td>
          <td>Dolor</td>
        </tr>
      </table>

Alignment modifiers

The table fixed modifier forces all cells within a table to occupy the same width as each other. This also has performance benefits: because the browser does not need to (re)calculate cell dimensions based on content it discovers, the table can be rendered very quickly.

o-table > o-table--fixed
Lorem ipsumLorem
Dolor sit ametIpsum
ConsecteurElit
      <table class="o-table o-table--fixed">
        <tr>
          <th>Lorem ipsum</th>
          <th>Lorem</th>
        </tr>
        <tr>
          <td>Dolor sit amet</td>
          <td>Ipsum</td>
        </tr>
        <tr>
          <td>Consecteur elit</td>
          <td>Dolor</td>
        </tr>
      </table>