Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

								
<table class="table">
  <thead>
	<tr>
	  <th scope="col">#</th>
	  <th scope="col">First</th>
	  <th scope="col">Last</th>
	  <th scope="col">Handle</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td scope="row" data-label="Sr no.">1</td>
	  <td data-label="Frst">Mark</td>
	  <td data-label="Last">Otto</td>
	  <td data-label="Handel">@mdo</td>
	</tr>
	<tr>
	  <td scope="row" data-label="Sr no.">2</td>
	  <td data-label="Frst">Jacob</td>
	  <td data-label="Last">Thornton</td>
	  <td data-label="Handel">@fat</td>
	</tr>
	<tr>
	  <td scope="row"data-label="Sr no.">3</td>
	  <td data-label="Frst">Larry the Bird</td>
	  <td data-label="Last">Bird</td>
	  <td data-label="Handel">@twitter</td>
	</tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Bird @twitter 
								
<table class="table table-striped">
  <thead>
	<tr>
	  <th scope="col">#</th>
	  <th scope="col">First</th>
	  <th scope="col">Last</th>
	  <th scope="col">Handle</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td scope="row" data-label="Sr no.">1</td>
	  <td data-label="Frst">Mark</td>
	  <td data-label="Last">Otto</td>
	  <td data-label="Handel">@mdo</td>
	</tr>
	<tr>
	  <td scope="row" data-label="Sr no.">2</td>
	  <td data-label="Frst">Jacob</td>
	  <td data-label="Last">Thornton</td>
	  <td data-label="Handel">@fat</td>
	</tr>
	<tr>
	  <td scope="row"data-label="Sr no.">3</td>
	  <td data-label="Frst">Larry the Bird</td>
	  <td data-label="Last">Bird</td>
	  <td data-label="Handel">@twitter</td>
	</tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Bird @twitter 
								
<table class="table table-dark table-striped">
  <thead>
	<tr>
	  <th scope="col">#</th>
	  <th scope="col">First</th>
	  <th scope="col">Last</th>
	  <th scope="col">Handle</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td scope="row" data-label="Sr no.">1</td>
	  <td data-label="Frst">Mark</td>
	  <td data-label="Last">Otto</td>
	  <td data-label="Handel">@mdo</td>
	</tr>
	<tr>
	  <td scope="row" data-label="Sr no.">2</td>
	  <td data-label="Frst">Jacob</td>
	  <td data-label="Last">Thornton</td>
	  <td data-label="Handel">@fat</td>
	</tr>
	<tr>
	  <td scope="row"data-label="Sr no.">3</td>
	  <td data-label="Frst">Larry the Bird</td>
	  <td data-label="Last">Bird</td>
	  <td data-label="Handel">@twitter</td>
	</tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Bird @twitter 
								
<table class="table table-hover">
  <thead>
	<tr>
	  <th scope="col">#</th>
	  <th scope="col">First</th>
	  <th scope="col">Last</th>
	  <th scope="col">Handle</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td scope="row" data-label="Sr no.">1</td>
	  <td data-label="Frst">Mark</td>
	  <td data-label="Last">Otto</td>
	  <td data-label="Handel">@mdo</td>
	</tr>
	<tr>
	  <td scope="row" data-label="Sr no.">2</td>
	  <td data-label="Frst">Jacob</td>
	  <td data-label="Last">Thornton</td>
	  <td data-label="Handel">@fat</td>
	</tr>
	<tr>
	  <td scope="row"data-label="Sr no.">3</td>
	  <td data-label="Frst">Larry the Bird</td>
	  <td data-label="Last">Bird</td>
	  <td data-label="Handel">@twitter</td>
	</tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Bird @twitter 
								
<table class="table table-striped table-hover">
  <thead>
	<tr>
	  <th scope="col">#</th>
	  <th scope="col">First</th>
	  <th scope="col">Last</th>
	  <th scope="col">Handle</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td scope="row" data-label="Sr no.">1</td>
	  <td data-label="Frst">Mark</td>
	  <td data-label="Last">Otto</td>
	  <td data-label="Handel">@mdo</td>
	</tr>
	<tr>
	  <td scope="row" data-label="Sr no.">2</td>
	  <td data-label="Frst">Jacob</td>
	  <td data-label="Last">Thornton</td>
	  <td data-label="Handel">@fat</td>
	</tr>
	<tr>
	  <td scope="row"data-label="Sr no.">3</td>
	  <td data-label="Frst">Larry the Bird</td>
	  <td data-label="Last">Bird</td>
	  <td data-label="Handel">@twitter</td>
	</tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird Bird @twitter

Already working together?

log in to your account and connect with your teammates!.