Version 3.0.6

Tables

Tables display raw data sets. They are used heavily in our products. In order to take advantage of the styling below, just add the base class .table to any <table>. As a user hovers over a row, a background is displayed for that row. You are encouraged to enable column sorting.

The default table is used when it is place directly on the page or within an existing panel. The default hover behavior is a full-row background as the user hovers over the row. item-status class added in v2.8.0. See the documentation for Action Dropdowns for more information on how to implement those within tables.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive
534
Rachel Spikula rspikula@example.comPittsburghActive
745
Barack Obama bo@barackobama.comChicagoActive
                      
<div class="table-wrapper">
<table class="table">
<thead class="thead">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">City</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"><span class="item-status">Updated</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
</tbody>
</table>
</div>

You can apply a gray background to the table head by applying the .thead-default class to thead.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive

You can apply borders between each table cell by applying the .table-bordered class to the table.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive

You can apply zebra-striping to table rows by applying the .table-striped class to the table.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive

You can make the table more compact and reduce the padding by applying the .table-sm class to the table.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive

You can make the table responsive by applying the .table-responsive class to the table. This will implement a scrollbar on small devices.

Note: Any content that may overflow the table will be cut off. This includes dropdowns and any other widgets that may overflow the table.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive

When usinga table for data, such as numeric data, we have a special class that combines some of the above table classes. Add the table-data class to the table for the below styling.

IDNameEmailCityStatus
123
Justin Lewis jlewis@example.comLewisvilleActive
256
Danielle Ameen dameen@example.comTownsvilleActive
389
Aurora Nou anou@example.comCitytonActive
534
Rachel Spikula rspikula@example.comPittsburghActive
745
Barack Obama bo@barackobama.comChicagoActive

Tables can also be embedded within a panel. Use a .table-panel class when there will be no other content in the panel other than the data table - this will allow the table to maximize the use of space within the panel.

Column 1 Column 2 Column 3 Column 4 Column 5
Table item Updated by User Name
Item sub info
Table itemTable itemTable itemTable item
Table itemPublished by User Name
Item sub info
Table itemTable itemTable itemTable item
Table itemSent by User Name
Item sub info
Table itemTable itemTable itemTable item
Table itemDeactivated by User Name
Item sub info
Table itemTable itemTable itemTable item
Table itemUpdated by User Name
Item sub info
Table itemTable itemTable itemTable item
                       
<div class="table-wrapper table-panel">
<table class="table">
<thead class="thead">
<tr>
<th scope="col"> <a>Column 1</a></th>
<th scope="col"> Column 2</th>
<th scope="col"> Column 3</th>
<th scope="col"> Column 4</th>
<th scope="col"> Column 5</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"> <span class="item-status">Updated</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"><span class="item-status">Published</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"><span class="item-status">Sent</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"><span class="item-status">Deactivated</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
<tr>
<td>
<div class="item-info"><span class="item-name"><a href="javascript:void(0);">Table item</a></span><span class="item-sub-info"><span class="item-status">Updated</span> by User Name
<br>Item sub info</span>
</div>
</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
<td>Table item</td>
</tr>
</tbody>
</table>
</div>

Search Results

Powered by