Co-Design

Tables

Tables allow you to display structured data in a meaningful way. Do not use tables to arrange elements in a certain way. Use the grid system instead.

Basic structure

To apply Co-Design's table formatting, you just need to add the .table class to a HTML table. This will automatically add some padding and borders.

Example
<table class="table">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48

Full width table

By default, tables grow with its content, except that they can't overflow their parent container. However it is possible to fix tables to 100% width, by giving them the .is-full-width class.

Example
<table class="table is-full-width">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48

Striped table

It is also possible to make the table striped, i.e. highlighting every even row. This is helpful for scanning large tables, because it is now harder to "switch the row" by accident. To do so, you just need to give the column the class .is-striped.

Example
<table class="table is-striped">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48

Hoverable table

Furthermore it is possible to highlight hovered columns, i.e. highlighting every even row. This is also helpful for scanning large tables, because it is now harder to "switch the row" by accident. To do so, you just need to give the column the class .is-with-hover.

Example
<table class="table is-with-hover">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48

Hoverable and striped table

It's of course also possible to combine stripes and hover effects.

Example
<table class="table is-with-hover is-striped">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48

Compact table

Sometimes it's better to have a compact table. These tables have reduced whitespace.

Of course, compact layout can also be combined with the three other modifiers.

Example
<table class="table is-compact">
    <tr>
        <th>#</th>
        <th>Question</th>
        <th>Answer count</th>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="#">How can I contribute to Co-Design?</a></td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#">Why should I choose Co-Design over Bootstrap?</a></td>
        <td>94</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">How to style a table in Co-Design?</a></td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#">What's the difference between a table and a button?</a></td>
        <td>48</td>
    </tr>
</table>
# Question Answer count
1 How can I contribute to Co-Design? 5
2 Why should I choose Co-Design over Bootstrap? 94
3 How to style a table in Co-Design? 3
3 What's the difference between a table and a button? 48