AMP CSS Tables Library

Documentation and examples for css tables: AMP CSS Tables Library.

AMP CSS Tables

Default Table

The tables are just your standard table element with thead, tbody, tr, th and td elements within.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>AMP</td>
      <td>CSS</td>
      <td>Framework</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>AMP</td>
      <td>CSS</td>
      <td>Library</td>
    </tr>
  </tbody>
</table>
Tables with striped row

Use .striped to add striping to any table row within the <tbody>.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table class="striped">
  ...
</table>
Bordered tables

Add .bordered for tables with borders on all sides of the table and cells.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table class="bordered">
  ...
</table>
Borderless tables

Add .borderless for tables without borders.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table class="borderless">
  ...
</table>
Hoverable rows

Add .hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table class="hover">
  ...
</table>
Responsive tables

Across every breakpoint, use .responsive for horizontally scrolling tables.

# 1 2 3 4 5 6 7 8 9
1 1 2 3 4 5 6 7 8 9
2 1 2 3 4 5 6 7 8 9
<div class="table-responsive">
  <table>
    ...
  </table>
</div>
Small tables

Add .small to make tables more compact by cutting cell padding in half.

# First Last Handle
1 AMP CSS Framework
2 AMP CSS Library
<table class="small">
  ...
</table>

Bootstrap tables documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.