Table

A table component for displaying HTML tables.

npm version

npm install @vrembem/table
@import "@vrembem/table/index";

table

For simple responsive table styles you can wrap your tables in the scroll-box base component.

List of anarchists
# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table">
  <caption>List of anarchists</caption>
  <thead>
    <tr>
      <th class="col_auto">#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Noam</td>
      <td>Chomsky</td>
      <td>@chomsky</td>
    </tr>
    ...
  </tbody>
</table>

table_style_rowed

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_style_rowed">
  ...
</table>

table_style_bordered

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_style_bordered">
  ...
</table>

table_zebra

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_zebra">
  ...
</table>

table_hover

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_hover">
  ...
</table>

table_size_sm

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_size_sm">
  ...
</table>

table_size_lg

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_size_lg">
  ...
</table>

table_overflow_ellipsis

# First Last Email Handle
1 Noam Chomsky noam@chomsky.com @chomsky
2 Howard Zinn howard@zinn.com @zinn
3 Pierre-Joseph Proudhon pierre@proudhon.com @proudhon
4 George Orwell george@orwell.com @orwell
5 Rudolf Rocker rudolf@rocker.com @rocker
<table class="table table_ellipsis">
  <colgroup>
    <col style="width:50px;">
  </colgroup>
  ...
</table>