Skip to content

Instantly share code, notes, and snippets.

@CarlBoneri

CarlBoneri/ZOeawg.markdown

Created July 24, 2016 07:23
Show Gist options
  • Save CarlBoneri/940b908268d8f51b66c78edf5e15d9c0 to your computer and use it in GitHub Desktop.
Save CarlBoneri/940b908268d8f51b66c78edf5e15d9c0 to your computer and use it in GitHub Desktop.
Download ZIP
rterial table template
Raw
index.html
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
</head>
<div class="row">
<div class="col s10 offset-s1">
<div class="card-panel" style="padding:1px !important;height:600px !important;overflow:scroll">
<div class="tbl_card_header">
<div class="tbl_head_swap">
<div class="col s3">
<p>
Table
</p>
</div>
<div class="col s9">
<a class="waves-effect waves-light btn-flat right table-nav">
<i class="material-icons" style="font-size:24px;">filter_list</i>
</a>
<a class="waves-effect waves-light btn-flat right table-nav">
<i class="material-icons" style="font-size:24px;">person_add</i>
</a>
</div>
</div>
<div style="display:none;background-color:#E3F2FD;" class="tbl_head_swap">
<div class="col s3">
<p class="table-title light-blue-text">hi<p>
</div>
<div class="col s9">
<a class="btn-flat right table-nav waves-effect waves-dark">
<i class="material-icons md-24">more_vert</i>
</a>
<a class="btn-flat right table-nav waves-effect waves-dark">
<i class="material-icons md-24">delete</i>
</a>
</div>
</div>
</div>
<div style="overflow:scroll">
<table class="bordered highlight responsive-table">
<thead>
<tr style="z-index:499;">
<th>
<input type="checkbox" id="all_col" />
<label for="all_col"></label>
</th>
<th> mpg </th>
<th> cyl </th>
<th> disp </th>
<th> hp </th>
<th> drat </th>
<th> wt </th>
<th>qsec </th>
<th>vs </th>
<th>am </th>
<th> gear </th>
<th> carb </th>
</tr>
</thead>
<tbody style="background-color:#F5F5F5">
<tr>
<td style="text-align:center;">
<input type="checkbox" id="mazda_rx4" /><label for="mazda_rx4"></label> </td>
<td style="text-align:center;"> 21.0 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 160.0 </td>
<td style="text-align:center;"> 110 </td>
<td style="text-align:center;"> 3.90 </td>
<td style="text-align:center;"> 2.620 </td>
<td style="text-align:center;"> 16.46 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;">
<input type="checkbox" id="mazda_rx4_wag" />
<label for="mazda_rx4_wag"></label>
</td>
<td style="text-align:center;"> 21.0 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 160.0 </td>
<td style="text-align:center;"> 110 </td>
<td style="text-align:center;"> 3.90 </td>
<td style="text-align:center;"> 2.875 </td>
<td style="text-align:center;"> 17.02 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="datsun_710" /><label for="datsun_710"></label> </td>
<td style="text-align:center;"> 22.8 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 108.0 </td>
<td style="text-align:center;"> 93 </td>
<td style="text-align:center;"> 3.85 </td>
<td style="text-align:center;"> 2.320 </td>
<td style="text-align:center;"> 18.61 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="hornet_4_drive" /><label for="hornet_4_drive"></label> </td>
<td style="text-align:center;"> 21.4 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 258.0 </td>
<td style="text-align:center;"> 110 </td>
<td style="text-align:center;"> 3.08 </td>
<td style="text-align:center;"> 3.215 </td>
<td style="text-align:center;"> 19.44 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="hornet_sportabout" /><label for="hornet_sportabout"></label> </td>
<td style="text-align:center;"> 18.7 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 360.0 </td>
<td style="text-align:center;"> 175 </td>
<td style="text-align:center;"> 3.15 </td>
<td style="text-align:center;"> 3.440 </td>
<td style="text-align:center;"> 17.02 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="valiant" /><label for="valiant"></label> </td>
<td style="text-align:center;"> 18.1 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 225.0 </td>
<td style="text-align:center;"> 105 </td>
<td style="text-align:center;"> 2.76 </td>
<td style="text-align:center;"> 3.460 </td>
<td style="text-align:center;"> 20.22 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="duster_360" /><label for="duster_360"></label> </td>
<td style="text-align:center;"> 14.3 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 360.0 </td>
<td style="text-align:center;"> 245 </td>
<td style="text-align:center;"> 3.21 </td>
<td style="text-align:center;"> 3.570 </td>
<td style="text-align:center;"> 15.84 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_240d" /><label for="merc_240d"></label> </td>
<td style="text-align:center;"> 24.4 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 146.7 </td>
<td style="text-align:center;"> 62 </td>
<td style="text-align:center;"> 3.69 </td>
<td style="text-align:center;"> 3.190 </td>
<td style="text-align:center;"> 20.00 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_230" /><label for="merc_230"></label> </td>
<td style="text-align:center;"> 22.8 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 140.8 </td>
<td style="text-align:center;"> 95 </td>
<td style="text-align:center;"> 3.92 </td>
<td style="text-align:center;"> 3.150 </td>
<td style="text-align:center;"> 22.90 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_280" /><label for="merc_280"></label> </td>
<td style="text-align:center;"> 19.2 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 167.6 </td>
<td style="text-align:center;"> 123 </td>
<td style="text-align:center;"> 3.92 </td>
<td style="text-align:center;"> 3.440 </td>
<td style="text-align:center;"> 18.30 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_280c" /><label for="merc_280c"></label> </td>
<td style="text-align:center;"> 17.8 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 167.6 </td>
<td style="text-align:center;"> 123 </td>
<td style="text-align:center;"> 3.92 </td>
<td style="text-align:center;"> 3.440 </td>
<td style="text-align:center;"> 18.90 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_450se" /><label for="merc_450se"></label> </td>
<td style="text-align:center;"> 16.4 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 275.8 </td>
<td style="text-align:center;"> 180 </td>
<td style="text-align:center;"> 3.07 </td>
<td style="text-align:center;"> 4.070 </td>
<td style="text-align:center;"> 17.40 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 3 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_450sl" /><label for="merc_450sl"></label> </td>
<td style="text-align:center;"> 17.3 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 275.8 </td>
<td style="text-align:center;"> 180 </td>
<td style="text-align:center;"> 3.07 </td>
<td style="text-align:center;"> 3.730 </td>
<td style="text-align:center;"> 17.60 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 3 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="merc_450slc" /><label for="merc_450slc"></label> </td>
<td style="text-align:center;"> 15.2 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 275.8 </td>
<td style="text-align:center;"> 180 </td>
<td style="text-align:center;"> 3.07 </td>
<td style="text-align:center;"> 3.780 </td>
<td style="text-align:center;"> 18.00 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 3 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="cadillac_fleetwood" /><label for="cadillac_fleetwood"></label> </td>
<td style="text-align:center;"> 10.4 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 472.0 </td>
<td style="text-align:center;"> 205 </td>
<td style="text-align:center;"> 2.93 </td>
<td style="text-align:center;"> 5.250 </td>
<td style="text-align:center;"> 17.98 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="lincoln_continental" /><label for="lincoln_continental"></label> </td>
<td style="text-align:center;"> 10.4 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 460.0 </td>
<td style="text-align:center;"> 215 </td>
<td style="text-align:center;"> 3.00 </td>
<td style="text-align:center;"> 5.424 </td>
<td style="text-align:center;"> 17.82 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="chrysler_imperial" /><label for="chrysler_imperial"></label> </td>
<td style="text-align:center;"> 14.7 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 440.0 </td>
<td style="text-align:center;"> 230 </td>
<td style="text-align:center;"> 3.23 </td>
<td style="text-align:center;"> 5.345 </td>
<td style="text-align:center;"> 17.42 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="fiat_128" /><label for="fiat_128"></label> </td>
<td style="text-align:center;"> 32.4 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 78.7 </td>
<td style="text-align:center;"> 66 </td>
<td style="text-align:center;"> 4.08 </td>
<td style="text-align:center;"> 2.200 </td>
<td style="text-align:center;"> 19.47 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="honda_civic" /><label for="honda_civic"></label> </td>
<td style="text-align:center;"> 30.4 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 75.7 </td>
<td style="text-align:center;"> 52 </td>
<td style="text-align:center;"> 4.93 </td>
<td style="text-align:center;"> 1.615 </td>
<td style="text-align:center;"> 18.52 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="toyota_corolla" /><label for="toyota_corolla"></label> </td>
<td style="text-align:center;"> 33.9 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 71.1 </td>
<td style="text-align:center;"> 65 </td>
<td style="text-align:center;"> 4.22 </td>
<td style="text-align:center;"> 1.835 </td>
<td style="text-align:center;"> 19.90 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="toyota_corona" /><label for="toyota_corona"></label> </td>
<td style="text-align:center;"> 21.5 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 120.1 </td>
<td style="text-align:center;"> 97 </td>
<td style="text-align:center;"> 3.70 </td>
<td style="text-align:center;"> 2.465 </td>
<td style="text-align:center;"> 20.01 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="dodge_challenger" /><label for="dodge_challenger"></label> </td>
<td style="text-align:center;"> 15.5 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 318.0 </td>
<td style="text-align:center;"> 150 </td>
<td style="text-align:center;"> 2.76 </td>
<td style="text-align:center;"> 3.520 </td>
<td style="text-align:center;"> 16.87 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="amc_javelin" /><label for="amc_javelin"></label> </td>
<td style="text-align:center;"> 15.2 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 304.0 </td>
<td style="text-align:center;"> 150 </td>
<td style="text-align:center;"> 3.15 </td>
<td style="text-align:center;"> 3.435 </td>
<td style="text-align:center;"> 17.30 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="camaro_z28" /><label for="camaro_z28"></label> </td>
<td style="text-align:center;"> 13.3 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 350.0 </td>
<td style="text-align:center;"> 245 </td>
<td style="text-align:center;"> 3.73 </td>
<td style="text-align:center;"> 3.840 </td>
<td style="text-align:center;"> 15.41 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="pontiac_firebird" /><label for="pontiac_firebird"></label> </td>
<td style="text-align:center;"> 19.2 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 400.0 </td>
<td style="text-align:center;"> 175 </td>
<td style="text-align:center;"> 3.08 </td>
<td style="text-align:center;"> 3.845 </td>
<td style="text-align:center;"> 17.05 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 3 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="fiat_x1-9" /><label for="fiat_x1-9"></label> </td>
<td style="text-align:center;"> 27.3 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 79.0 </td>
<td style="text-align:center;"> 66 </td>
<td style="text-align:center;"> 4.08 </td>
<td style="text-align:center;"> 1.935 </td>
<td style="text-align:center;"> 18.90 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 1 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="porsche_914-2" /><label for="porsche_914-2"></label> </td>
<td style="text-align:center;"> 26.0 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 120.3 </td>
<td style="text-align:center;"> 91 </td>
<td style="text-align:center;"> 4.43 </td>
<td style="text-align:center;"> 2.140 </td>
<td style="text-align:center;"> 16.70 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 5 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="lotus_europa" /><label for="lotus_europa"></label> </td>
<td style="text-align:center;"> 30.4 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 95.1 </td>
<td style="text-align:center;"> 113 </td>
<td style="text-align:center;"> 3.77 </td>
<td style="text-align:center;"> 1.513 </td>
<td style="text-align:center;"> 16.90 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 5 </td>
<td style="text-align:center;"> 2 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="ford_pantera_l" /><label for="ford_pantera_l"></label> </td>
<td style="text-align:center;"> 15.8 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 351.0 </td>
<td style="text-align:center;"> 264 </td>
<td style="text-align:center;"> 4.22 </td>
<td style="text-align:center;"> 3.170 </td>
<td style="text-align:center;"> 14.50 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 5 </td>
<td style="text-align:center;"> 4 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="ferrari_dino" /><label for="ferrari_dino"></label> </td>
<td style="text-align:center;"> 19.7 </td>
<td style="text-align:center;"> 6 </td>
<td style="text-align:center;"> 145.0 </td>
<td style="text-align:center;"> 175 </td>
<td style="text-align:center;"> 3.62 </td>
<td style="text-align:center;"> 2.770 </td>
<td style="text-align:center;"> 15.50 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 5 </td>
<td style="text-align:center;"> 6 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="maserati_bora" /><label for="maserati_bora"></label> </td>
<td style="text-align:center;"> 15.0 </td>
<td style="text-align:center;"> 8 </td>
<td style="text-align:center;"> 301.0 </td>
<td style="text-align:center;"> 335 </td>
<td style="text-align:center;"> 3.54 </td>
<td style="text-align:center;"> 3.570 </td>
<td style="text-align:center;"> 14.60 </td>
<td style="text-align:center;"> 0 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 5 </td>
<td style="text-align:center;"> 8 </td>
</tr>
<tr>
<td style="text-align:center;"> <input type="checkbox" id="volvo_142e" /><label for="volvo_142e"></label> </td>
<td style="text-align:center;"> 21.4 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 121.0 </td>
<td style="text-align:center;"> 109 </td>
<td style="text-align:center;"> 4.11 </td>
<td style="text-align:center;"> 2.780 </td>
<td style="text-align:center;"> 18.60 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 1 </td>
<td style="text-align:center;"> 4 </td>
<td style="text-align:center;"> 2 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Raw
script.js
$(":checkbox").change(function() {
$(this).closest("tr").toggleClass("highlight-rows", this.checked);
});
$('#all_col').click(function (e) {
$(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
$(this).closest("tr").toggleClass("highlight-rows", this.checked);
});
$( ":checkbox" ).click(function() {
$( ".tbl_head_swap" ).toggle();
});
Raw
style.css
.highlight-rows {
background-color:#F5F5F5
}
.waves-effect.waves-blue .waves-ripple {
/* The alpha value allows the text and background color
of the button to still show through. */
background-color: rgba(3, 169, 244,0.65);
}
a.table-nav {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 1.3rem !important;
text-transform: uppercase;
vertical-align: middle;
margin-left: 5px !important;
-webkit-tap-highlight-color: transparent;
}
.table-nav {
margin-top: 15px;
color: rgba(0, 0, 0, 0.53);
background-color: transparent !important;
box-shadow: none !important;
padding: none !important;
}
.tbl_card_header{
min-height:75px;
z-index:5000;
margin-bottom:1px;
background-color:#40c4ff;
color:rgba(255,255,255,0.87) !important;
}
.tbl_head_swap {
color:rgba(0,0,0,0.87);
font-size:20px;
font-family:Roboto Regular;
z-index:500;
padding:1px 5px;
vertical-align:middle;
height:100%;
display:inline-block;
position:relative;
width:100%;
margin-bottom:-25px;
}
.tbl_head_swap > i{
float:right;
color:rgba(0,0,0,0.54);
font-size:24px;
}
th > label {
margin-left:25%;
color:transparent
}
.card-panel table{
padding:1px !important;
}
thead{
margin-top:5px;
border-bottom:2px solid rgba(0,0,0,0.1) !important;
}
tbody{
position:relative;
display:table-flex;
z-index:2
}
@media only screen and (max-width: 992px){
.tbl_card_header{
border-bottom:none !important;
}
table.responsive-table thead {
height:100%;
top: 0;
position: inherit;
display: inline-table;
margin-top: -1.45rem;
overflow:hidden;
z-index:1;
border-right:1px solid transparent !important;
padding-right:3%;text-align:center !important;
}
input[type="checkbox"], input[type="radio"],[type="checkbox"]+label{
padding-left:30px !important;height:25px !important; text-align:end !important;vertical-align:bottom !important;
}
}
/*Utils*/
::-webkit-scrollbar {
width: 3px;
height: 2px;
}
::-webkit-scrollbar-button {
width: 3px;
height: 2px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.54);
border: 3px none rgba(0, 0, 0, 0.54);
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.64);
}
::-webkit-scrollbar-thumb:active {
background: rgba(0, 0, 0, 0.54);
}
::-webkit-scrollbar-track {
background: #fff;
border: 2px none #fff;
border-radius: 1px;
}
::-webkit-scrollbar-track:hover {
background: #fff;
}
::-webkit-scrollbar-track:active {
background: #fff;
}
::-webkit-scrollbar-corner {
background: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment