table
For basic table styles, only the table
component class is required. Use proper table markup and styles should apply as expected.
# | First | Last | 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="table__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>
For simple responsive table styles, wrap your tables in the
scroll-box
base component.<div class="scroll-box"> <table class="table">...</table> </div>
table_style_[key]
# | First | Last | 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>
# | First | Last | 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 | 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 | 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_responsive_[key]
When scroll-box
isn’t mobile friendly enough, table_responsive_[key]
is available to turn tables into a more readable format on smaller devices. Mobile labels are set using the data-mobile-lable
attribute.
# | User | |
---|---|---|
1 | someone | someone@email.com |
2 | else | else@email.com |
3 | another | another@email.com |
<table class="table table_responsive_lg">
<thead>
<tr>
<th>...</th>
...
</tr>
</thead>
<tbody>
<tr>
<td data-mobile-label="...">...</td>
...
</tr>
...
</tbody>
</table>
Available modifier keys default to
core.$breakpoints
map but can be overridden by setting component variable$breakpoints
:$breakpoints: ( "xs": 480px, "sm": 620px, "md": 760px, "lg": 990px, "xl": 1380px ) !default;
table_size_[key]
# | First | Last | 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>
# | First | Last | 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 | 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>