Tables

The data tables can be used like any table. If you like to use the row highlighting use .table-hover class in the table tag. To make the table responsive use .table-responsive class in the table tag. To get the proper styling you need to use <thead> and <tbody> tags. To get the numeric table cells align to the right use .numeric-col class. The checkboxes also have a specific padding. To get the specific styling use .checkbox-col class.

Desert (100g serving) Calories Fat (g) Carbs (g) Protein (g) Sodium (mg) Calcium (%) Iron (%)
Frozen yogurt 159 6.0 24 4.0 87 14% 1%
Ice cream sandwich 237 9.0 37 4.3 129 8% 1%
		
<table class="table-hover">
  <thead>
    <tr>
      <th class="checkbox-col"><input type="checkbox" class="checkbox" id="c1"></th>
      <th class="">Desert (100g serving)</th>
      <th class="numeric-col">Calories</th>
      <th class="numeric-col">Fat (g)</th>
      <th class="numeric-col">Carbs (g)</th>
      <th class="numeric-col">Protein (g)</th>
      <th class="numeric-col">Sodium (mg)</th>
      <th class="numeric-col">Calcium (%)</th>
      <th class="numeric-col">Iron (%)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="checkbox-col"><input type="checkbox" class="checkbox" id="c2"></td>
      <td>Frozen yogurt</td>
      <td class="numeric-col">159</td>
      <td class="numeric-col">6.0</td>
      <td class="numeric-col">24</td>
      <td class="numeric-col">4.0</td>
      <td class="numeric-col">87</td>
      <td class="numeric-col">14%</td>
      <td class="numeric-col">1%</td>
    </tr>
    <tr>
      <td class="checkbox-col"><input type="checkbox" class="checkbox" id="c3"></td>
      <td>Ice cream sandwich</td>
      <td class="numeric-col">237</td>
      <td class="numeric-col">9.0</td>
      <td class="numeric-col">37</td>
      <td class="numeric-col">4.3</td>
      <td class="numeric-col">129</td>
      <td class="numeric-col">8%</td>
      <td class="numeric-col">1%</td>
    </tr>
  </tbody>
</table>
		
	
Desert (100g serving) Calories Fat (g) Carbs (g) Protein (g) Sodium (mg) Calcium (%) Iron (%)
Frozen yogurt 159 6.0 24 4.0 87 14% 1%
Ice cream sandwich 237 9.0 37 4.3 129 8% 1%
		
<table class="table-hover table-responsive">
  <thead>
    <tr>
      <th class="checkbox-col"><input type="checkbox" class="checkbox" id="c1"></th>
      <th class="">Desert (100g serving)</th>
      <th class="numeric-col">Calories</th>
      <th class="numeric-col">Fat (g)</th>
      <th class="numeric-col">Carbs (g)</th>
      <th class="numeric-col">Protein (g)</th>
      <th class="numeric-col">Sodium (mg)</th>
      <th class="numeric-col">Calcium (%)</th>
      <th class="numeric-col">Iron (%)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="checkbox-col"><input type="checkbox" class="checkbox" id="c2"></td>
      <td>Frozen yogurt</td>
      <td class="numeric-col">159</td>
      <td class="numeric-col">6.0</td>
      <td class="numeric-col">24</td>
      <td class="numeric-col">4.0</td>
      <td class="numeric-col">87</td>
      <td class="numeric-col">14%</td>
      <td class="numeric-col">1%</td>
    </tr>
    <tr>
      <td class="checkbox-col"><input type="checkbox" class="checkbox" id="c3"></td>
      <td>Ice cream sandwich</td>
      <td class="numeric-col">237</td>
      <td class="numeric-col">9.0</td>
      <td class="numeric-col">37</td>
      <td class="numeric-col">4.3</td>
      <td class="numeric-col">129</td>
      <td class="numeric-col">8%</td>
      <td class="numeric-col">1%</td>
    </tr>
  </tbody>
</table>
		
	

Resources