<section>
<!--for demo wrap-->
<h1>#15 სამარშუტო ხაზის გრაფიკი</h1>
<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>გასვლის პუნქტი</th>
<th>მოსვლა</th>
<th>გაჩერება</th>
<th>გასვლა</th>
<th>ჩასვლის პუნქტი</th>
</tr>
</thead>
</table>
</div>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>წყალტუბო</td>
<td>07:20 </td>
<td>10 წთ</td>
<td>07:30</td>
<td>გუბისწყალი</td>
</tr>
<tr>
<td>გუბისწყალი</td>
<td>08:10</td>
<td>20 წთ.</td>
<td>08:30</td>
<td>წყალტუბო</td>
</tr>
<tr>
<td>წყალტუბო</td>
<td>9:10</td>
<td>1 სთ. 20 წთ.</td>
<td>10:30</td>
<td>გუბისწყალი</td>
</tr>
<tr>
<td>გუბისწყალი</td>
<td>11:10</td>
<td>15 წთ.</td>
<td>11:25</td>
<td>წყალტუბო</td>
</tr>
<tr>
<td>წყალტუბო</td>
<td>12:10</td>
<td>1 სთ. 20 წთ.</td>
<td>13:30</td>
<td>გუბისწყალი</td>
</tr>
<tr>
<td>გუბისწყალი</td>
<td>14:10</td>
<td>15 წთ.</td>
<td>14:25</td>
<td>წყალტუბო</td>
</tr>
<tr>
<td>წყალტუბო</td>
<td>15:10</td>
<td>1 სთ. 20 წთ.</td>
<td>16:30</td>
<td>გუბისწყალი</td>
</tr>
<tr>
<td>გუბისყალი</td>
<td>17:10</td>
<td>20 წთ.</td>
<td>17:30</td>
<td>წყალტუბო</td>
</tr>
<tr>
<td>წყალტუბო</td>
<td>18:10</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- follow me template -->
<div class="made-with-love">
Shevradeni
<i>♥</i>
<a target="_blank" href="https://shevardenibus.com"></a>
</div>
h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 20px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: center;
font-weight: 500;
font-size: 20px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: center;
vertical-align:middle;
font-weight: 300;
font-size: 18px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
/* demo styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: -webkit-linear-gradient(left, #384C5A, #384C5A);
background: linear-gradient(to right, #384C5A, #25b7c4);
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
/* follow me template */
.made-with-love {
margin-top: 40px;
padding: 10px;
clear: left;
text-align: center;
font-size: 10px;
font-family: arial;
color: #fff;
}
.made-with-love i {
font-style: normal;
color: #F50057;
font-size: 14px;
position: relative;
top: 2px;
}
.made-with-love a {
color: #fff;
text-decoration: none;
}
.made-with-love a:hover {
text-decoration: underline;
}
/* for custom scrollbar for webkit browser*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
// '.tbl-content' consumed little space for vertical scrollbar, scrollbar width depend on browser/os/platfrom. Here calculate the scollbar width .
$(window).on("load resize ", function() {
var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
$('.tbl-header').css({'padding-right':scrollWidth});
}).resize();