Stylabilla

2.35.1 #Components.table.scrollable Table with scrollable content

Markup change compared to not scrollable content:

your table needs to be in a parent ("viewport") with a fixed size
your table needs to be wrapped in a .table-container
each column (th and td elements) are going to have the same width. But you can specify a width in percent for each column to adapt the grid.
compare to previous one, on the first th, don't forget to put sb-table__checkbox that define a specific size for the column checkbox
there is also a specific class for tbody sb-table__tbody

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Default styling

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--checkbox-visible

Shows all elements on checkbox column.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--compact.sb-table--checkbox-visible

Applies small padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table--comfortable.sb-table--checkbox-visible

Applies big padding to the cells of your table.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

.sb-table__tr.sb-table__tr--inactive

Disable hover highlight for table row.

Form Name	Created	Performance	Status
NPS campaign CS Nordics	19 Sept 2018	221 Completed	Active
Slide-out campaign: really big title slide out how did you find us?	18 Sept 2018	221 Completed	Disabled
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active
Exit Survey (Product Page)	18 Sept 2018	221 Completed	Active

Markup

<style>
  #kssref-components-table-scrollable td,
  #kssref-components-table-scrollable th {
    width: 15%;
  }
  #kssref-components-table-scrollable td:nth-child(1),
  #kssref-components-table-scrollable th:nth-child(1) {
    width: 40px;
  }
  #kssref-components-table-scrollable td:nth-child(2),
  #kssref-components-table-scrollable th:nth-child(2) {
    width: 50%;
  }
}
</style>
<div class="sb-table sb-table--scrollable-content [modifier class]">
  <table class="sb-table__table" role="grid">
     <thead class="sb-table__thead">
        <tr class="sb-table__tr">
           <th class="sb-table__hh sb-table__action sb-text--center sb-table__checkbox" scope="col">
             <!-- empty cel for checkbox column, we don't have select all function yet -->
           </th>
           <th class="sb-table__hh" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Form Name<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Platform<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col" aria-sort="ascending">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="">
                 Created<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col" aria-sort="descending">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Performance<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Status<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
        </tr>
     </thead>
     <tbody class="sb-table__tbody sb-text--s">
        <tr class="sb-table__tr [modifier class]">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-1-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-1-[modifier class]">NPS campaign CS Nordics</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">19 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-2-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-2-[modifier class]">Slide-out campaign: really big title slide out how did you find us?</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Disabled
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-3-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-3-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-4-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-4-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-5-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-5-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-6-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-6-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-7-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-7-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-8-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-8-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-9-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-9-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-10-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-10-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-11-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-11-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr [modifier class]">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-12-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-12-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-scollable-13-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-scollable-13-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
     </tbody>
  </table>
</div>

Source: components/_table.scss, line 425