table
A table can be used to display structured data.
Individual table cells can be modified to display their text bold or highlight themself by changing the background color. Therefore you can mix the styles to create a header on the top, the side, the top and side or as creative as you want it to be! More details about the table cells can be found under Atoms > Table cell.
table of content
component variations
table default
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral |
<table class="m-table" aria-label="Highlights">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>table with highlighted row
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral |
<table class="m-table" aria-label="Highlights">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr class="-secondary">
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>table with caption
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral | ||
| Neutral | Neutral | Neutral |
<table class="m-table" aria-label="Highlights">
<caption>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor.
</caption>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr class="">
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
<tr>
<td>Neutral</td>
<td>Neutral</td>
<td class="-with-icon">
<i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
</td>
<td>Neutral</td>
<td>
<div class="a-link -icon">
<a href="#" target="_self">
<span>Link</span>
<span>
Label
<i class="a-icon ui-ic-nosafe-lr-right-small"></i>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>additional content
styles SCSS
/* stylelint-disable a11y/line-height-is-vertical-rhythmed */
.m-table {
border-collapse: collapse;
font-size: 1rem;
line-height: 1.5;
width: 100%;
td,
th {
@include text-regular;
height: 3rem;
box-sizing: border-box;
padding: 0.75rem 1rem 0.6875rem;
border: 0;
border-bottom: 0.06rem;
border-style: solid;
border-color: var(--plain__disabled__front__default);
> .a-icon {
font-size: 1.5rem;
line-height: 1;
vertical-align: text-bottom;
}
}
.-with-icon {
line-height: 1;
}
.-with-icon-and-label {
align-items: center;
display: flex;
min-height: 3rem;
height: auto;
.a-icon {
align-self: flex-start;
padding-right: 0.5rem;
}
}
th {
font-weight: 700;
}
thead th {
border-color: var(--plain__enabled__front__default);
}
th:first-child,
td:first-child {
padding-left: 1rem;
}
th:last-child,
td:last-child {
padding-right: 1rem;
}
caption {
@include size-s;
caption-side: bottom;
margin-top: 0.5rem;
text-align: left;
}
}