Tables

Tables organize information with common attributes in a grid, increasing readability of the content and giving the page an organized look.

Usage

Tables have rows and columns; columns usually have a header, typically rendered in bold, identifying the type of information in that column, and rows sometimes also have headers. The intersection of each row and column creates a cell, into which text or thumbnails can be added. When bulleted lists have already been employed repeatedly, tables are a useful substitute for chunking content. 

EXAMPLES

<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<table class="table table-dark">
	<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<table class="table">
	<thead class="thead-dark">
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>

<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<table class="table table-striped table-dark">
	<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<table class="table table-bordered">
	<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td colspan="2">Larry the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>
<table class="table table-bordered table-dark">
	<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>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td colspan="2">Larry the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
<style type="text/css">.table {
	    background-color: transparent;
	    border-spacing: 0;
	    border-collapse: collapse;
	    color: #212529;
	    margin-bottom: 1rem;
	    max-width: 100%;
	    width: 100%;
	  }
	  
	  .table td,
	  .table th {
	    padding: .75rem;
	    text-align: left;
	    vertical-align: top;
	    border-top: 1px solid #dee2e6
	  }
	  
	  .table thead th {
	    vertical-align: bottom;
	    border-bottom: 2px solid #dee2e6
	  }
	  
	  .table tbody+tbody {
	    border-top: 2px solid #dee2e6
	  }

		.table>caption+thead>tr:first-child>th, 
		.table>colgroup+thead>tr:first-child>th, 
		.table>thead:first-child>tr:first-child>th, 
		.table>caption+thead>tr:first-child>td, 
		.table>colgroup+thead>tr:first-child>td, 
		.table>thead:first-child>tr:first-child>td {
		    border-top: 0;
		}
	  
	  .table-sm td,
	  .table-sm th {
	    padding: .3rem
	  }
	  
	  .table-bordered,
	  .table-bordered td,
	  .table-bordered th {
	    border: 1px solid #dee2e6
	  }
	  
	  .table-bordered thead td,
	  .table-bordered thead th {
	    border-bottom-width: 2px
	  }
	  
	  .table-borderless tbody+tbody,
	  .table-borderless td,
	  .table-borderless th,
	  .table-borderless thead th {
	    border: 0
	  }
	  
	  .table-striped tbody tr:nth-of-type(odd) {
	    background-color: rgba(0, 0, 0, .05)
	  }
	  
	  .table-hover tbody tr:hover {
	    color: #212529;
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table-primary,
	  .table-primary>td,
	  .table-primary>th {
	    background-color: #c8d7e5
	  }
	  
	  .table-primary tbody+tbody,
	  .table-primary td,
	  .table-primary th,
	  .table-primary thead th {
	    border-color: #99b4cf
	  }
	  
	  .table-hover .table-primary:hover,
	  .table-hover .table-primary:hover>td,
	  .table-hover .table-primary:hover>th {
	    background-color: #b7cadd
	  }
	  
	  .table-secondary,
	  .table-secondary>td,
	  .table-secondary>th {
	    background-color: #cfcfcf
	  }
	  
	  .table-secondary tbody+tbody,
	  .table-secondary td,
	  .table-secondary th,
	  .table-secondary thead th {
	    border-color: #a7a7a7
	  }
	  
	  .table-hover .table-secondary:hover,
	  .table-hover .table-secondary:hover>td,
	  .table-hover .table-secondary:hover>th {
	    background-color: #c2c2c2
	  }
	  
	  .table-success,
	  .table-success>td,
	  .table-success>th {
	    background-color: #c3e6cb
	  }
	  
	  .table-success tbody+tbody,
	  .table-success td,
	  .table-success th,
	  .table-success thead th {
	    border-color: #8fd19e
	  }
	  
	  .table-hover .table-success:hover,
	  .table-hover .table-success:hover>td,
	  .table-hover .table-success:hover>th {
	    background-color: #b1dfbb
	  }
	  
	  .table-info,
	  .table-info>td,
	  .table-info>th {
	    background-color: #bee5eb
	  }
	  
	  .table-info tbody+tbody,
	  .table-info td,
	  .table-info th,
	  .table-info thead th {
	    border-color: #86cfda
	  }
	  
	  .table-hover .table-info:hover,
	  .table-hover .table-info:hover>td,
	  .table-hover .table-info:hover>th {
	    background-color: #abdde5
	  }
	  
	  .table-warning,
	  .table-warning>td,
	  .table-warning>th {
	    background-color: #ffeeba
	  }
	  
	  .table-warning tbody+tbody,
	  .table-warning td,
	  .table-warning th,
	  .table-warning thead th {
	    border-color: #ffdf7e
	  }
	  
	  .table-hover .table-warning:hover,
	  .table-hover .table-warning:hover>td,
	  .table-hover .table-warning:hover>th {
	    background-color: #ffe8a1
	  }
	  
	  .table-danger,
	  .table-danger>td,
	  .table-danger>th {
	    background-color: #f5c6cb
	  }
	  
	  .table-danger tbody+tbody,
	  .table-danger td,
	  .table-danger th,
	  .table-danger thead th {
	    border-color: #ed969e
	  }
	  
	  .table-hover .table-danger:hover,
	  .table-hover .table-danger:hover>td,
	  .table-hover .table-danger:hover>th {
	    background-color: #f1b0b7
	  }
	  
	  .table-light,
	  .table-light>td,
	  .table-light>th {
	    background-color: #fdfdfe
	  }
	  
	  .table-light tbody+tbody,
	  .table-light td,
	  .table-light th,
	  .table-light thead th {
	    border-color: #fbfcfc
	  }
	  
	  .table-hover .table-light:hover,
	  .table-hover .table-light:hover>td,
	  .table-hover .table-light:hover>th {
	    background-color: #ececf6
	  }
	  
	  .table-dark,
	  .table-dark>td,
	  .table-dark>th {
	    background-color: #c6c8ca
	  }
	  
	  .table-dark tbody+tbody,
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #95999c
	  }
	  
	  .table-hover .table-dark:hover,
	  .table-hover .table-dark:hover>td,
	  .table-hover .table-dark:hover>th {
	    background-color: #b9bbbe
	  }
	  
	  .table-active,
	  .table-active>td,
	  .table-active>th,
	  .table-hover .table-active:hover,
	  .table-hover .table-active:hover>td,
	  .table-hover .table-active:hover>th {
	    background-color: rgba(0, 0, 0, .075)
	  }
	  
	  .table .thead-dark th {
	    color: #fff;
	    background-color: #343a40;
	    border-color: #454d55
	  }
	  
	  .table .thead-light th {
	    color: #495057;
	    background-color: #e9ecef;
	    border-color: #dee2e6
	  }
	  
	  .table-dark {
	    color: #fff;
	    background-color: #343a40
	  }
	  
	  .table-dark td,
	  .table-dark th,
	  .table-dark thead th {
	    border-color: #454d55
	  }
	  
	  .table-dark.table-bordered {
	    border: 0
	  }
	  
	  .table-dark.table-striped tbody tr:nth-of-type(odd) {
	    background-color: hsla(0, 0%, 100%, .05)
	  }
	  
	  .table-dark.table-hover tbody tr:hover {
	    color: #fff;
	    background-color: hsla(0, 0%, 100%, .075)
	  }
	  
	  @media(max-width:575.98px) {
	    .table-responsive-sm {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-sm>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:767.98px) {
	    .table-responsive-md {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-md>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:991.98px) {
	    .table-responsive-lg {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-lg>.table-bordered {
	        border: 0
	    }
	  }
	  
	  @media(max-width:1199.98px) {
	    .table-responsive-xl {
	        display: block;
	        width: 100%;
	        overflow-x: auto;
	        -webkit-overflow-scrolling: touch
	    }
	    .table-responsive-xl>.table-bordered {
	        border: 0
	    }
	  }
	  
	  .table-responsive {
	    display: block;
	    width: 100%;
	    overflow-x: auto;
	    -webkit-overflow-scrolling: touch
	  }
	  
	  .table-responsive>.table-bordered {
	    border: 0
	  }
</style>