Table

Our tables are designed to show as much information as possible while maintaining great readability.

Table Styles

Class .wb-table and .wb-table--fixed

Our regular table has borders at the bottom of each row. Each cell is spaced 20px apart and there are no outside gutters. By default, our table uses table-layout: auto. To use fixed rendering, apply the modifier .wb-table--fixed.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Modifier .wb-table--padded

Adds 20px outside spacing to each row.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--padded'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Modifier .wb-table--bordered

Adds border around the entire table. Often used with .wb-table--padded.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--padded wb-table--bordered'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Modifier .wb-table--small

Cuts vertical spacing for each row in half.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--small'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Modifier .wb-table--sortable

Used if the table headers are sort links. Apply .sortable to any column that can be sorted and apply .sorted to the sorted column.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--sortable'>
  <thead>
    <tr>
       <th class='sorted sortable'>
         Form Name
         <i class='sorted__icon fa fa-caret-down' />
       </th>
       <th class='sortable'>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Modifier .wb-table--clickable

Used if table body rows should be clickable. Changes the background color and pointer when hovering over a table body row.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--clickable'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>

Cell Styles

Class .wb-td-centered

Removes vertical padding around the cell and veriticaly aligns the item. Useful to vertically align each row's call to action to its text without increasing the row's vertical spacing.

Form Name Owner
Hogwarts Conference & Travel Request Albus Dumbledore
Forbidden Forest Night Pass Rubeus Hagrid
Student Day Trip Request to Hogsmeade Minerva McGonagall 
<table class='wb-table'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th></th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
 </tbody>
</table>

Class .wb-td-text-right

Alignts text to the right. Often used with numbers or the row's call to action.

Form Name Owner Total
Hogwarts Conference & Travel Request Albus Dumbledore 1000
Forbidden Forest Night Pass Rubeus Hagrid 10
Student Day Trip Request to Hogsmeade Minerva McGonagall 1 
<table class='wb-table'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th class='wb-td-text-right'>Total</th>
       <th></th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td class='wb-td-text-right'><a href='#'>1000</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td class='wb-td-text-right'><a href='#'>10</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td class='wb-td-text-right'><a href='#'>1</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
 </tbody>
</table>

Class .wb-td-text-truncated

Truncates text in a cell. Note that this only works if table layout is fixed.

Form Name Owner Total
Hogwarts Conference & Travel Request and Hotel Budget and Use of Magic Permissions Form Albus Dumbledore 1000
Forbidden Forest Night Pass and Request for Professor to Accompany on Journey Rubeus Hagrid 10
Student Day Trip Request to Hogsmeade along with a Galleon of Gold to Buy Butter Beer Minerva McGonagall 1 
<table class='wb-table' style='table-layout: fixed'>
  <thead>
    <tr>
       <th width='50%'>Form Name</th>
       <th width='20%'>Owner</th>
       <th width='10%' class='wb-td-text-right'>Total</th>
       <th width='20%'></th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td class='wb-td-text-truncated'>Hogwarts Conference & Travel Request and Hotel Budget and Use of Magic Permissions Form</td>
     <td class='wb-td-text-truncated'>Albus Dumbledore</td>
     <td class='wb-td-text-right'><a href='#'>1000</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td class='wb-td-text-truncated'>Forbidden Forest Night Pass and Request for Professor to Accompany on Journey</td>
     <td class='wb-td-text-truncated'>Rubeus Hagrid</td>
     <td class='wb-td-text-right'><a href='#'>10</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td class='wb-td-text-truncated'>Student Day Trip Request to Hogsmeade along with a Galleon of Gold to Buy Butter Beer</td>
     <td class='wb-td-text-truncated'>Minerva McGonagall</td>
     <td class='wb-td-text-right'><a href='#'>1</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
 </tbody>
</table>

Checkboxes

Class .wb-th-checkbox and .wb-td-checkbox

Sets the proper size of the checkbox within a table.

Form Name Owner
Hogwarts Conference & Travel Request Albus Dumbledore
Forbidden Forest Night Pass Rubeus Hagrid
Student Day Trip Request to Hogsmeade Minerva McGonagall 
<table class='wb-table'>
  <thead>
    <tr>
       <th><input class='wb-th-checkbox' type='checkbox' readOnly /></th>
       <th>Form Name</th>
       <th>Owner</th>
       <th></th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td><input class='wb-td-checkbox' type='checkbox' readOnly /></td>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
   <tr>
     <td><input class='wb-td-checkbox' type='checkbox' readOnly /></td>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
   <tr>
     <td><input class='wb-td-checkbox' type='checkbox' readOnly /></td>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td class='wb-td-centered'><button class='wb-button wb-button--small'>Manage</button></td>
   </tr>
 </tbody>
</table>

Horizontal Scrolling

Class .wb-table-scroll-container

Apply to a parent container if table should always be scrollable.

Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
Information Information Information Information Information Information Information Information Information Information
Information Information Information Information Information Information Information Information Information Information
Information Information Information Information Information Information Information Information Information Information 
<div class='wb-table-scroll-container'>
<table class='wb-table'>
  <thead>
    <tr>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
   </tr>
   <tr>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
   </tr>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
     <td>Information</td>
   </tr>
 </tbody>
</table>
</div>

Class .wb-table-scroll-container-xs

Apply to a parent container if table should be scroll in xs screen sizes (767px or less).

Heading Heading Heading Heading Heading Heading Heading Heading
Info Info Info Info Info Info Info Info
Info Info Info Info Info Info Info Info
Info Info Info Info Info Info Info Info 
<div class='wb-table-scroll-container-xs'>
<table class='wb-table'>
  <thead>
    <tr>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
       <th>Heading</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
   </tr>
   <tr>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
   </tr>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
     <td>Info</td>
   </tr>
 </tbody>
</table>
</div>

Table action

Class .wb-table-action

Appied to a div at the end of the table, made to look like it's a full width table row. Often used for Load more action on a table.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active
Viewing 3 of 10. See more 
<table class='wb-table'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>
<div class='wb-table-action'>
  Viewing 3 of 10. <a href="#" class='wb-u-margin-l-1'>See more</a>
</div>

Modifier .wb-table-action--bordered

Applied to the action when table is bordered.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active
Viewing 3 of 10. See more 
<table class='wb-table wb-table--bordered wb-table--padded'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>Hogwarts Conference & Travel Request</td>
     <td>Albus Dumbledore</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>Active</td>
   </tr>
   <tr>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>Active</td>
   </tr>
 </tbody>
</table>
<div class='wb-table-action wb-table-action--bordered'>
  Viewing 3 of 10. <a href="#" class='wb-u-margin-l-1'>See more</a>
</div>

Modifier .wb-table--flex

Styles the table rows display: flex instead of display: table. This is useful when you want to take advantage of properties such as flex-grow and flex-shrink to control how column widths render on different screen sizes. When using this modifier, you'll need to supply each column width in the form of flex: <grow> <shrink> <basis>, either as a class or an inline style.

Form Name Owner Status
Hogwarts Conference & Travel Request Albus Dumbledore Active
Forbidden Forest Night Pass Rubeus Hagrid Active
Student Day Trip Request to Hogsmeade Minerva McGonagall Active 
<table class='wb-table wb-table--flex'>
  <thead>
    <tr>
       <th style='flex: 1 0 200px'>Form Name</th>
       <th style='flex: 0 0 200px'>Owner</th>
       <th style='flex: 0 1 200px'>Status</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td style='flex: 1 0 200px'>Hogwarts Conference & Travel Request</td>
     <td style='flex: 0 0 200px'>Albus Dumbledore</td>
     <td style='flex: 0 1 200px'>Active</td>
   </tr>
   <tr>
     <td style='flex: 1 0 200px'>Forbidden Forest Night Pass</td>
     <td style='flex: 0 0 200px'>Rubeus Hagrid</td>
     <td style='flex: 0 1 200px'>Active</td>
   </tr>
   <tr>
     <td style='flex: 1 0 200px'>Student Day Trip Request to Hogsmeade</td>
     <td style='flex: 0 0 200px'>Minerva McGonagall</td>
     <td style='flex: 0 1 200px'>Active</td>
   </tr>
 </tbody>
</table>

Responsive Tables

Class .wb-table--responsive-xs

Converts the table to block elements on small screens. All content will be left aligned, and data-responsive-label is used to create the a label for each row.

Form Name Owner Total
Hogwarts Conference & Travel Request Albus Dumbledore 1000
Forbidden Forest Night Pass Rubeus Hagrid 10
Student Day Trip Request to Hogsmeade Minerva McGonagall 1 
<table class='wb-table wb-table--responsive-xs'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th class='wb-td-text-right'>Total</th>
       <th></th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td data-responsive-label='Form Name'>Hogwarts Conference & Travel Request</td>
     <td data-responsive-label='Owner'>Albus Dumbledore</td>
     <td data-responsive-label='Total' class='wb-td-text-right'><a href='#'>1000</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td data-responsive-label='Form Name'>Forbidden Forest Night Pass</td>
     <td data-responsive-label='Owner'>Rubeus Hagrid</td>
     <td data-responsive-label='Total' class='wb-td-text-right'><a href='#'>10</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
   <tr>
     <td data-responsive-label='Form Name'>Student Day Trip Request to Hogsmeade</td>
     <td data-responsive-label='Owner'>Minerva McGonagall</td>
     <td data-responsive-label='Total' class='wb-td-text-right'><a href='#'>1</a></td>
     <td class='wb-td-centered wb-td-text-right'>
       <button class='wb-button wb-button--small'>
         Manage
       </button>
     </td>
   </tr>
 </tbody>
</table>

Accordion Rows

Class .wb-tr-accordion, .wb-tr-accordion--expand, and .wb-tr-accordion-target.

Accordion rows are created by two table rows. The first row will always be visible and should have .wb-tr-accordion applied. The immediate sibling row that follows will expand/collapse and should have .wb-tr-accordion-target applied. Adding/removing wb-tr-accordion--expand will expand/hide the immediate sibling row.

Form Name Owner Total
Forbidden Forest Night Pass Rubeus Hagrid 10 Collapse
This information is shown because `.wb-tr-accordion--expand` is applied to `.wb-tr-accordion`. This row's `td` has colspan applied so its content spans the entire width of the table. To give this content a background color, apply styles to a `div` within the `td`, and not the `td` itself.
Student Day Trip Request to Hogsmeade Minerva McGonagall 1 Expand
This information is hidden because `.wb-tr-accordion--expand` is not applied to `.wb-tr-accordion`. 
<table class='wb-table'>
  <thead>
    <tr>
       <th>Form Name</th>
       <th>Owner</th>
       <th>Total</th>
       <th></th>
    </tr>
 </thead>
 <tbody>
   <tr class='wb-tr-accordion  wb-tr-accordion--expand'>
     <td>Forbidden Forest Night Pass</td>
     <td>Rubeus Hagrid</td>
     <td>10</td>
     <td class='wb-td-text-right'><a href='#'>Collapse</a></td>
   </tr>
   <tr class='wb-tr-accordion-target'>
     <td colspan='4'>
       <div style='padding: 20px; background: #f4f4f5;'>
         This information is shown because `.wb-tr-accordion--expand` is applied to `.wb-tr-accordion`.
         This row's `td` has colspan applied so its content spans the entire width of the table.
         To give this content a background color, apply styles to a `div` within the `td`, and not
         the `td` itself.
       </div>
     </td>
   </tr>
   <tr class='wb-tr-accordion'>
     <td>Student Day Trip Request to Hogsmeade</td>
     <td>Minerva McGonagall</td>
     <td>1</td>
     <td class='wb-td-text-right'><a href='#'>Expand</a></td>
   </tr>
   <tr class='wb-tr-accordion-target'>
     <td colspan='4'>
       <div style='padding: 20px; background: #f4f4f5;'>
         This information is hidden because `.wb-tr-accordion--expand` is not applied to `.wb-tr-accordion`.
       </div>
     </td>
   </tr>
 </tbody>
</table>