TABLES

JTB MD includes several types of tables which allows users to take show different types of data easily.

Main table

To call JTB_MD tables, which has lots of different styles, you need to add .jtbTable class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Bordered table

To make the table bordered, you need to add .jtbTableBordered class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Centered table

To make the table centered, you need to add .jtbTableCentered class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableCentered'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Condensed table

To make the table condensed, you need to add .jtbTableCondensed class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableCondensed'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Enlarged table

To make the table enlarged, you need to add .jtbTableEnlarged class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableEnlarged'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Striped table

To make the table striped, you need to add .jtbTableStriped class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableStriped'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Striped by columns table

To make the table striped by columns, you need to add .jtbTableStripedColumn class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableStripedColumn'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Hoverable table

To make the table hoverable, you need to add .jtbTableHoverable class into your <table> element.

First Second Third
First Second Third
First Second
First Second Third
			Copy
			<table class='jtbTable jtbTableBordered jtbTableHoverable'>
	<thead>
		<tr>
			<th>First</th>
			<th>Second</th>
			<th>Third</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
		<tr>
			<td>First</td>
			<td colspan='2'>Second</td>
		</tr>
		<tr>
			<td>First</td>
			<td>Second</td>
			<td>Third</td>
		</tr>
	</tbody>
</table>
		

Responsive table

To make the table responsive, you need to add .jtbTableHolder class into your <div> element which covers the .jtbTable.

First Second Third Fourth Fifth Sixth Seventh Eight Nineth Tenth Eleventh Twelveth Thirteenth Fourteenth Fifteenth
First Second Third Fourth Fifth Sixth Seventh Eight Nineth Tenth Eleventh Twelveth Thirteenth Fourteenth Fifteenth
First Second Third Fourth Fifth Sixth Seventh Eight Nineth Tenth Eleventh Twelveth Thirteenth Fourteenth Fifteenth
First Second Third Fourth Fifth Sixth Seventh Eight Nineth Tenth Eleventh Twelveth Thirteenth Fourteenth Fifteenth
			Copy
			<div class='jtbTableHolder'>
	<table class='jtbTable jtbTableBordered'>
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>