Modern table html css Vertical & Horizontal , bootstrap,

Modern table html css Vertical & Horizontal Table 01 : <div class="table100 ver1 m-b-110"> ...

Modern table html css Vertical & Horizontal

Table 01 :

<div class="table100 ver1 m-b-110">
<table data-vertable="ver1">
<thead>
<tr class="row100 head">
<th class="column100 column1" data-column="column1"></th>
<th class="column100 column2" data-column="column2">Sunday</th>
<th class="column100 column3" data-column="column3">Monday</th>
<th class="column100 column4" data-column="column4">Tuesday</th>
<th class="column100 column5" data-column="column5">Wednesday</th>
<th class="column100 column6" data-column="column6">Thursday</th>
<th class="column100 column7" data-column="column7">Friday</th>
<th class="column100 column8" data-column="column8">Saturday</th>
</tr>
</thead>
<tbody>
<tr class="row100">
<td class="column100 column1" data-column="column1">Lawrence Scott</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Jane Medina</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Billy Mitchell</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Beverly Reid</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Tiffany Wade</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Sean Adams</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Rachel Simpson</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Mark Salazar</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>
</tbody>
</table>

</div>

Table 02:

<div class="table100 ver2 m-b-110">
<table data-vertable="ver2">
<thead>
<tr class="row100 head">
<th class="column100 column1" data-column="column1"></th>
<th class="column100 column2" data-column="column2">Sunday</th>
<th class="column100 column3" data-column="column3">Monday</th>
<th class="column100 column4" data-column="column4">Tuesday</th>
<th class="column100 column5" data-column="column5">Wednesday</th>
<th class="column100 column6" data-column="column6">Thursday</th>
<th class="column100 column7" data-column="column7">Friday</th>
<th class="column100 column8" data-column="column8">Saturday</th>
</tr>
</thead>
<tbody>
<tr class="row100">
<td class="column100 column1" data-column="column1">Lawrence Scott</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Jane Medina</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Billy Mitchell</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Beverly Reid</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Tiffany Wade</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Sean Adams</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Rachel Simpson</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Mark Salazar</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>
</tbody>
</table>

</div>

Table 03 :

<div class="table100 ver3 m-b-110">
<table data-vertable="ver3">
<thead>
<tr class="row100 head">
<th class="column100 column1" data-column="column1"></th>
<th class="column100 column2" data-column="column2">Sunday</th>
<th class="column100 column3" data-column="column3">Monday</th>
<th class="column100 column4" data-column="column4">Tuesday</th>
<th class="column100 column5" data-column="column5">Wednesday</th>
<th class="column100 column6" data-column="column6">Thursday</th>
<th class="column100 column7" data-column="column7">Friday</th>
<th class="column100 column8" data-column="column8">Saturday</th>
</tr>
</thead>
<tbody>
<tr class="row100">
<td class="column100 column1" data-column="column1">Lawrence Scott</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Jane Medina</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Billy Mitchell</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Beverly Reid</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Tiffany Wade</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Sean Adams</td>
<td class="column100 column2" data-column="column2">--</td>
<td class="column100 column3" data-column="column3">5:00 PM</td>
<td class="column100 column4" data-column="column4">5:00 PM</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">9:00 AM</td>
<td class="column100 column7" data-column="column7">--</td>
<td class="column100 column8" data-column="column8">--</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Rachel Simpson</td>
<td class="column100 column2" data-column="column2">9:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">--</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">2:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>

<tr class="row100">
<td class="column100 column1" data-column="column1">Mark Salazar</td>
<td class="column100 column2" data-column="column2">8:00 AM</td>
<td class="column100 column3" data-column="column3">--</td>
<td class="column100 column4" data-column="column4">--</td>
<td class="column100 column5" data-column="column5">8:00 AM</td>
<td class="column100 column6" data-column="column6">--</td>
<td class="column100 column7" data-column="column7">5:00 PM</td>
<td class="column100 column8" data-column="column8">8:00 AM</td>
</tr>
</tbody>
</table>

</div>

Table 04 :

<div class="table100 ver4 m-b-110">

<table data-vertable="ver4">

<thead>

<tr class="row100 head">

<th class="column100 column1" data-column="column1"></th>

<th class="column100 column2" data-column="column2">Sunday</th>

<th class="column100 column3" data-column="column3">Monday</th>

<th class="column100 column4" data-column="column4">Tuesday</th>

<th class="column100 column5" data-column="column5">Wednesday</th>

<th class="column100 column6" data-column="column6">Thursday</th>

<th class="column100 column7" data-column="column7">Friday</th>

<th class="column100 column8" data-column="column8">Saturday</th>

</tr>

</thead>

<tbody>

<tr class="row100">

<td class="column100 column1" data-column="column1">Lawrence Scott</td>

<td class="column100 column2" data-column="column2">8:00 AM</td>

<td class="column100 column3" data-column="column3">--</td>

<td class="column100 column4" data-column="column4">--</td>

<td class="column100 column5" data-column="column5">8:00 AM</td>

<td class="column100 column6" data-column="column6">--</td>

<td class="column100 column7" data-column="column7">5:00 PM</td>

<td class="column100 column8" data-column="column8">8:00 AM</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Jane Medina</td>

<td class="column100 column2" data-column="column2">--</td>

<td class="column100 column3" data-column="column3">5:00 PM</td>

<td class="column100 column4" data-column="column4">5:00 PM</td>

<td class="column100 column5" data-column="column5">--</td>

<td class="column100 column6" data-column="column6">9:00 AM</td>

<td class="column100 column7" data-column="column7">--</td>

<td class="column100 column8" data-column="column8">--</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Billy Mitchell</td>

<td class="column100 column2" data-column="column2">9:00 AM</td>

<td class="column100 column3" data-column="column3">--</td>

<td class="column100 column4" data-column="column4">--</td>

<td class="column100 column5" data-column="column5">--</td>

<td class="column100 column6" data-column="column6">--</td>

<td class="column100 column7" data-column="column7">2:00 PM</td>

<td class="column100 column8" data-column="column8">8:00 AM</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Beverly Reid</td>

<td class="column100 column2" data-column="column2">--</td>

<td class="column100 column3" data-column="column3">5:00 PM</td>

<td class="column100 column4" data-column="column4">5:00 PM</td>

<td class="column100 column5" data-column="column5">--</td>

<td class="column100 column6" data-column="column6">9:00 AM</td>

<td class="column100 column7" data-column="column7">--</td>

<td class="column100 column8" data-column="column8">--</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Tiffany Wade</td>

<td class="column100 column2" data-column="column2">8:00 AM</td>

<td class="column100 column3" data-column="column3">--</td>

<td class="column100 column4" data-column="column4">--</td>

<td class="column100 column5" data-column="column5">8:00 AM</td>

<td class="column100 column6" data-column="column6">--</td>

<td class="column100 column7" data-column="column7">5:00 PM</td>

<td class="column100 column8" data-column="column8">8:00 AM</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Sean Adams</td>

<td class="column100 column2" data-column="column2">--</td>

<td class="column100 column3" data-column="column3">5:00 PM</td>

<td class="column100 column4" data-column="column4">5:00 PM</td>

<td class="column100 column5" data-column="column5">--</td>

<td class="column100 column6" data-column="column6">9:00 AM</td>

<td class="column100 column7" data-column="column7">--</td>

<td class="column100 column8" data-column="column8">--</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Rachel Simpson</td>

<td class="column100 column2" data-column="column2">9:00 AM</td>

<td class="column100 column3" data-column="column3">--</td>

<td class="column100 column4" data-column="column4">--</td>

<td class="column100 column5" data-column="column5">--</td>

<td class="column100 column6" data-column="column6">--</td>

<td class="column100 column7" data-column="column7">2:00 PM</td>

<td class="column100 column8" data-column="column8">8:00 AM</td>

</tr>

<tr class="row100">

<td class="column100 column1" data-column="column1">Mark Salazar</td>

<td class="column100 column2" data-column="column2">8:00 AM</td>

<td class="column100 column3" data-column="column3">--</td>

<td class="column100 column4" data-column="column4">--</td>

<td class="column100 column5" data-column="column5">8:00 AM</td>

<td class="column100 column6" data-column="column6">--</td>

<td class="column100 column7" data-column="column7">5:00 PM</td>

<td class="column100 column8" data-column="column8">8:00 AM</td>

</tr>

</tbody>

</table>

</div>

Table 05 :

<div class="table100 ver5 m-b-110">

<table data-vertable="ver5">