Displays table rows as scrollable columns at small breakpoints.
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/objects/responsive-tables.scss#L11
| Jack ID | VLAN Name | VLAN | Active | Link | Speed | MACs | Switch | Interface | MAC Address | Polled |
|---|---|---|---|---|---|---|---|---|---|---|
| 320-125-1-1-27 | ou128as02 | 16 | 1G | 0 | ou128as02 | Gi5/13 | 5 minutes ago | |||
| 320-125-1-1-27 | ou128as02 | 16 | 1G | 0 | ou128as02 | Gi5/13 | 5 minutes ago | |||
| 320-125-1-1-27 | ou128as02 | 16 | 1G | 0 | ou128as02 | Gi5/13 | 5 minutes ago | |||
| 320-125-1-1-27 | ou128as02 | 16 | 1G | 0 | ou128as02 | Gi5/13 | 5 minutes ago | |||
| 320-125-1-1-27 | ou128as02 | 16 | 1G | 0 | ou128as02 | Gi5/13 | 5 minutes ago |
<!-- responsive table -->
<div class="o-resp-table__wrap c-table__wrap u-space-stack-expanded">
<div class="c-fade c-fade--right">
<table class="o-resp-table c-table c-table--resp c-table--full-width u-space-stack" tabindex="0" role="table" aria-labelledby="a-table-caption">
<caption id="a-table-caption" class="visuallyhidden c-table__caption"><h2 class="c-table__heading">Port Results</h2></caption>
<thead class="o-resp-table__head c-table__head">
<tr class="o-resp-table__row c-table__row">
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Jack ID</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">VLAN Name</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-right">VLAN</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-center">Active</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-center">Link</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Speed</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-right">MACs</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Switch</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Interface</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">MAC Address</th>
<th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Polled</th>
</tr>
</thead>
<tbody class="o-resp-table__body c-table__body">
<tr class="o-resp-table__row c-table__row c-table__row">
<td class="o-resp-table__cell c-table__cell">
<span>320-125-1-1-27</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>16</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-link u-icon--before u-color--disable"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>1G</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>0</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>Gi5/13</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>5 minutes ago</span>
</td>
</tr>
<tr class="o-resp-table__row c-table__row c-table__row">
<td class="o-resp-table__cell c-table__cell">
<span>320-125-1-1-27</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>16</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-link u-icon--before u-color--disable"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>1G</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>0</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>Gi5/13</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>5 minutes ago</span>
</td>
</tr>
<tr class="o-resp-table__row c-table__row c-table__row">
<td class="o-resp-table__cell c-table__cell">
<span>320-125-1-1-27</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>16</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-link u-icon--before u-color--disable"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>1G</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>0</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>Gi5/13</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>5 minutes ago</span>
</td>
</tr>
<tr class="o-resp-table__row c-table__row c-table__row">
<td class="o-resp-table__cell c-table__cell">
<span>320-125-1-1-27</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>16</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-link u-icon--before u-color--disable"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>1G</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>0</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>Gi5/13</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>5 minutes ago</span>
</td>
</tr>
<tr class="o-resp-table__row c-table__row c-table__row">
<td class="o-resp-table__cell c-table__cell">
<span>320-125-1-1-27</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>16</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
<span><i class="icon-link u-icon--before u-color--disable"></i></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>1G</span>
</td>
<td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
<span>0</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>ou128as02</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>Gi5/13</span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span></span>
</td>
<td class="o-resp-table__cell c-table__cell">
<span>5 minutes ago</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>