Skip to content

Instantly share code, notes, and snippets.

@CarlBoneri

CarlBoneri/index.html

Created June 29, 2016 08:50
Show Gist options
  • Save CarlBoneri/3437a6627ca1fbb716fae4a037dbe94d to your computer and use it in GitHub Desktop.
Save CarlBoneri/3437a6627ca1fbb716fae4a037dbe94d to your computer and use it in GitHub Desktop.
Download ZIP
mtrlz_r_table
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 s9 offset-s2">
<div class="card-panel" style="padding:1px !important">
<div class="row" style="height:64px;margin-bottom:4px">
<!-- Visible Header Row -->
<div class="tbl_head_swap">
<!-- Title -->
<div class="col s3">
<p class="table-title">Table
<p>
</div>
<!-- Filter and User Buttons -->
<div class="col s9">
<div class="right">
<a class="btn btn-flat waves-effect waves-ripple waves-blue table-nav modal-trigger" href="#modal_add_row">
<i class="material-icons md-24">filter_list</i>
</a>
<a class="btn btn-flat waves-effect waves-ripple waves-blue table-nav">
<i class="material-icons md-24">person_add</i>
</a>
</div>
</div>
</div>
<!-- Alternate Header Row -->
<div style="display:none;background-color:#E3F2FD;margin-bottom:5px" class="tbl_head_swap z-depth-1">
<div class="col s3">
<p class="table-title light-blue-text" style="font-weight:400;">hi
<p>
</div>
<div class="col s9">
<a class="btn-flat right table-nav">
<i class="material-icons md-24">more_vert</i>
</a>
<a class="btn-flat right table-nav">
<i class="material-icons md-24">delete</i>
</a>
</div>
</div>
</div>
<table class="bordered highlight centered responsive-table rt_table">
<thead>
<tr style="border-bottom:1px solid blue;overflow:visible">
<th>
<input type="checkbox" id="all_col" />
<label style="" 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>
<tfoot>
<tr>
<td>Info</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<input type="checkbox" id="mazda_rx4" />
<label for="mazda_rx4"></label> </td>
<td> 21.0 </td>
<td> 6 </td>
<td> 160.0 </td>
<td> 110 </td>
<td> 3.90 </td>
<td> 2.620 </td>
<td> 16.46 </td>
<td> 0 </td>
<td> 1 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr>
<td>
<input type="checkbox" id="mazda_rx4_wag" />
<label for="mazda_rx4_wag"></label> </td>
<td> 21.0 </td>
<td> 6 </td>
<td> 160.0 </td>
<td> 110 </td>
<td> 3.90 </td>
<td> 2.875 </td>
<td> 17.02 </td>
<td> 0 </td>
<td> 1 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr>
<td>
<input type="checkbox" id="datsun_710" />
<label for="datsun_710"></label> </td>
<td> 22.8 </td>
<td> 4 </td>
<td> 108.0 </td>
<td> 93 </td>
<td> 3.85 </td>
<td> 2.320 </td>
<td> 18.61 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="hornet_4_drive" /><label for="hornet_4_drive"></label> </td>
<td> 21.4 </td>
<td> 6 </td>
<td> 258.0 </td>
<td> 110 </td>
<td> 3.08 </td>
<td> 3.215 </td>
<td> 19.44 </td>
<td> 1 </td>
<td> 0 </td>
<td> 3 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="hornet_sportabout" /><label for="hornet_sportabout"></label> </td>
<td> 18.7 </td>
<td> 8 </td>
<td> 360.0 </td>
<td> 175 </td>
<td> 3.15 </td>
<td> 3.440 </td>
<td> 17.02 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="valiant" /><label for="valiant"></label> </td>
<td> 18.1 </td>
<td> 6 </td>
<td> 225.0 </td>
<td> 105 </td>
<td> 2.76 </td>
<td> 3.460 </td>
<td> 20.22 </td>
<td> 1 </td>
<td> 0 </td>
<td> 3 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="duster_360" /><label for="duster_360"></label> </td>
<td> 14.3 </td>
<td> 8 </td>
<td> 360.0 </td>
<td> 245 </td>
<td> 3.21 </td>
<td> 3.570 </td>
<td> 15.84 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_240d" /><label for="merc_240d"></label> </td>
<td> 24.4 </td>
<td> 4 </td>
<td> 146.7 </td>
<td> 62 </td>
<td> 3.69 </td>
<td> 3.190 </td>
<td> 20.00 </td>
<td> 1 </td>
<td> 0 </td>
<td> 4 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_230" /><label for="merc_230"></label> </td>
<td> 22.8 </td>
<td> 4 </td>
<td> 140.8 </td>
<td> 95 </td>
<td> 3.92 </td>
<td> 3.150 </td>
<td> 22.90 </td>
<td> 1 </td>
<td> 0 </td>
<td> 4 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_280" /><label for="merc_280"></label> </td>
<td> 19.2 </td>
<td> 6 </td>
<td> 167.6 </td>
<td> 123 </td>
<td> 3.92 </td>
<td> 3.440 </td>
<td> 18.30 </td>
<td> 1 </td>
<td> 0 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_280c" /><label for="merc_280c"></label> </td>
<td> 17.8 </td>
<td> 6 </td>
<td> 167.6 </td>
<td> 123 </td>
<td> 3.92 </td>
<td> 3.440 </td>
<td> 18.90 </td>
<td> 1 </td>
<td> 0 </td>
<td> 4 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_450se" /><label for="merc_450se"></label> </td>
<td> 16.4 </td>
<td> 8 </td>
<td> 275.8 </td>
<td> 180 </td>
<td> 3.07 </td>
<td> 4.070 </td>
<td> 17.40 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 3 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_450sl" /><label for="merc_450sl"></label> </td>
<td> 17.3 </td>
<td> 8 </td>
<td> 275.8 </td>
<td> 180 </td>
<td> 3.07 </td>
<td> 3.730 </td>
<td> 17.60 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 3 </td>
</tr>
<tr>
<td> <input type="checkbox" id="merc_450slc" /><label for="merc_450slc"></label> </td>
<td> 15.2 </td>
<td> 8 </td>
<td> 275.8 </td>
<td> 180 </td>
<td> 3.07 </td>
<td> 3.780 </td>
<td> 18.00 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 3 </td>
</tr>
<tr>
<td> <input type="checkbox" id="cadillac_fleetwood" /><label for="cadillac_fleetwood"></label> </td>
<td> 10.4 </td>
<td> 8 </td>
<td> 472.0 </td>
<td> 205 </td>
<td> 2.93 </td>
<td> 5.250 </td>
<td> 17.98 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="lincoln_continental" /><label for="lincoln_continental"></label> </td>
<td> 10.4 </td>
<td> 8 </td>
<td> 460.0 </td>
<td> 215 </td>
<td> 3.00 </td>
<td> 5.424 </td>
<td> 17.82 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="chrysler_imperial" /><label for="chrysler_imperial"></label> </td>
<td> 14.7 </td>
<td> 8 </td>
<td> 440.0 </td>
<td> 230 </td>
<td> 3.23 </td>
<td> 5.345 </td>
<td> 17.42 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="fiat_128" /><label for="fiat_128"></label> </td>
<td> 32.4 </td>
<td> 4 </td>
<td> 78.7 </td>
<td> 66 </td>
<td> 4.08 </td>
<td> 2.200 </td>
<td> 19.47 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="honda_civic" /><label for="honda_civic"></label> </td>
<td> 30.4 </td>
<td> 4 </td>
<td> 75.7 </td>
<td> 52 </td>
<td> 4.93 </td>
<td> 1.615 </td>
<td> 18.52 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="toyota_corolla" /><label for="toyota_corolla"></label> </td>
<td> 33.9 </td>
<td> 4 </td>
<td> 71.1 </td>
<td> 65 </td>
<td> 4.22 </td>
<td> 1.835 </td>
<td> 19.90 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="toyota_corona" /><label for="toyota_corona"></label> </td>
<td> 21.5 </td>
<td> 4 </td>
<td> 120.1 </td>
<td> 97 </td>
<td> 3.70 </td>
<td> 2.465 </td>
<td> 20.01 </td>
<td> 1 </td>
<td> 0 </td>
<td> 3 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="dodge_challenger" /><label for="dodge_challenger"></label> </td>
<td> 15.5 </td>
<td> 8 </td>
<td> 318.0 </td>
<td> 150 </td>
<td> 2.76 </td>
<td> 3.520 </td>
<td> 16.87 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="amc_javelin" /><label for="amc_javelin"></label> </td>
<td> 15.2 </td>
<td> 8 </td>
<td> 304.0 </td>
<td> 150 </td>
<td> 3.15 </td>
<td> 3.435 </td>
<td> 17.30 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="camaro_z28" /><label for="camaro_z28"></label> </td>
<td> 13.3 </td>
<td> 8 </td>
<td> 350.0 </td>
<td> 245 </td>
<td> 3.73 </td>
<td> 3.840 </td>
<td> 15.41 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="pontiac_firebird" /><label for="pontiac_firebird"></label> </td>
<td> 19.2 </td>
<td> 8 </td>
<td> 400.0 </td>
<td> 175 </td>
<td> 3.08 </td>
<td> 3.845 </td>
<td> 17.05 </td>
<td> 0 </td>
<td> 0 </td>
<td> 3 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="fiat_x1-9" /><label for="fiat_x1-9"></label> </td>
<td> 27.3 </td>
<td> 4 </td>
<td> 79.0 </td>
<td> 66 </td>
<td> 4.08 </td>
<td> 1.935 </td>
<td> 18.90 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 1 </td>
</tr>
<tr>
<td> <input type="checkbox" id="porsche_914-2" /><label for="porsche_914-2"></label> </td>
<td> 26.0 </td>
<td> 4 </td>
<td> 120.3 </td>
<td> 91 </td>
<td> 4.43 </td>
<td> 2.140 </td>
<td> 16.70 </td>
<td> 0 </td>
<td> 1 </td>
<td> 5 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="lotus_europa" /><label for="lotus_europa"></label> </td>
<td> 30.4 </td>
<td> 4 </td>
<td> 95.1 </td>
<td> 113 </td>
<td> 3.77 </td>
<td> 1.513 </td>
<td> 16.90 </td>
<td> 1 </td>
<td> 1 </td>
<td> 5 </td>
<td> 2 </td>
</tr>
<tr>
<td> <input type="checkbox" id="ford_pantera_l" /><label for="ford_pantera_l"></label> </td>
<td> 15.8 </td>
<td> 8 </td>
<td> 351.0 </td>
<td> 264 </td>
<td> 4.22 </td>
<td> 3.170 </td>
<td> 14.50 </td>
<td> 0 </td>
<td> 1 </td>
<td> 5 </td>
<td> 4 </td>
</tr>
<tr>
<td> <input type="checkbox" id="ferrari_dino" /><label for="ferrari_dino"></label> </td>
<td> 19.7 </td>
<td> 6 </td>
<td> 145.0 </td>
<td> 175 </td>
<td> 3.62 </td>
<td> 2.770 </td>
<td> 15.50 </td>
<td> 0 </td>
<td> 1 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> <input type="checkbox" id="maserati_bora" /><label for="maserati_bora"></label> </td>
<td> 15.0 </td>
<td> 8 </td>
<td> 301.0 </td>
<td> 335 </td>
<td> 3.54 </td>
<td> 3.570 </td>
<td> 14.60 </td>
<td> 0 </td>
<td> 1 </td>
<td> 5 </td>
<td> 8 </td>
</tr>
<tr>
<td> <input type="checkbox" id="volvo_142e" /><label for="volvo_142e"></label> </td>
<td> 21.4 </td>
<td> 4 </td>
<td> 121.0 </td>
<td> 109 </td>
<td> 4.11 </td>
<td> 2.780 </td>
<td> 18.60 </td>
<td> 1 </td>
<td> 1 </td>
<td> 4 </td>
<td> 2 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="modal_add_row" class="modal modal-fixed-footer dark">
<div class="modal-content">
<h4>Add new record</h4>
<div class="row">
<div class="input-field col s4">
<input placeholder="MPG Data" id="add_mpg" type="text" class="validate">
<label for="add_mpg">mpg</label>
</div>
<div class="input-field col s4">
<input placeholder="CYL Data" id="add_cyl" type="text" class="validate">
<label for="add_cyl">cyl</label>
</div>
<div class="input-field col s4">
<input placeholder="DISP Data" id="add_disp" type="text" class="validate">
<label for="add_disp">disp</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input placeholder="HP Data" id="add_hp" type="text" class="validate">
<label for="add_hp">hp</label>
</div>
<div class="input-field col s4">
<input placeholder="DRAT Data" id="add_drat" type="text" class="validate">
<label for="add_drat">drat</label>
</div>
<div class="input-field col s4">
<input placeholder="WT Data" id="add_wt" type="text" class="validate">
<label for="add_wt">wt</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input placeholder="QSEC Data" id="add_qsec" type="text" class="validate">
<label for="add_qsec">qsec</label>
</div>
<div class="input-field col s4">
<input placeholder="VS Data" id="add_vs" type="text" class="validate">
<label for="add_vs">vs</label>
</div>
<div class="input-field col s4">
<input placeholder="AM Data" id="add_am" type="text" class="validate">
<label for="add_am">am</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="CARB Data" id="add_carb" type="text" class="validate">
<label for="add_carb">carb</label>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</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('input:checkbox').prop('checked', this.checked);
$(this).closest("table").toggleClass("highlight-rows", this.checked);
});
$('.modal-trigger').leanModal();
$( ":checkbox" ).click(function() {
$( ".tbl_head_swap" ).toggle();
});
Raw
style.css
::-webkit-scrollbar {
width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 -1 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 1px;
border-radius: 1px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 1px;
border-radius: 1px;
background: rgba(255, 255, 255, 0.53);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 255, 255, 0.53);
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-left {
float: left !important;
}
.highlight-rows {
background-color: #E0E0E0
}
thead > tr.highlight-rows,
tfoot > tr >td.highlight-rows,
th.highlight-rows {
background-color: #eceff1
}
.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);
}
.table-nav {
margin-top: 15px;
color: rgba(0, 0, 0, 0.53);
background-color: transparent !important;
box-shadow: none !important;
padding: none !important;
}
.btn.btn-flat.table-nav {
padding: none !important
}
.table-title {
color: rgba(0, 0, 0, 0.53);
font-size: 20px;
margin-left: 10%;
}
.tbl_head_swap {
color: rgba(0, 0, 0, 0.87);
font-size: 20px;
padding: 1px 5px;
vertical-align: middle;
height: 100%;
display: inline-block;
position: relative;
width: 100%;
margin-bottom: -1px;
}
.tbl_head_swap > i {
float: right;
color: rgba(0, 0, 0, 0.54);
font-size: 24px;
}
.rt_table {
width: 100%;
overflow: visible;
}
/*Handle the checkbox alignment issues*/
th > label {
vertical-align: middle;
font-size: 1px;
color: transparent
}
.card-panel table {
padding: 1px !important;
}
/*Fix the issue with:
1) display cell margin handlers
2) border-radius that is for some reason defaulted to 2px
*/
td,
th {
padding: 15px 5px;
display: table-cell;
text-align: -webkit-auto;
vertical-align: middle;
border-radius: 0px !important;
}
/*Fix the issue with responsive table header margins*/
@media only screen and (max-width: 992px) table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0;
text-align: -webkit-auto;
border-radius: 0ox !important;
}
tfoot {
border-top: 1px solid #d0d0d0;
text-align: -webkit-auto;
vertical-align: middle;
border-radius: 0px !important;
}
table.centered tfoot tr td {
text-align: center;
}
table.bordered>thead>tr,
table.bordered>tbody>tr,
table.bordered>thead>tr,
table.bordered>tfoot>tr {
border-bottom: 1px solid #d0d0d0
}
table.bordered>tfoot>tr>td,
table.bordered>thead>tr>th {
border-bottom: 1px solid rgba(0, 0, 0, 0.13) !important;
overflow: hidden;
}
@media only screen and (max-width: 992px) {
table.responsive-table {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
margin-bottom: -1px;
}
table.responsive-table tfoot,
table.responsive-table tfoot > tr {
display: table-cell;
float: right;
text-align: -webkit-auto;
vertical-align: -webkit-auto;
min-width: 77px;
border-right: transparent !important;
box-shadow: -2px 0 3px rgba(0, 0, 0, 0.24), 0 -2px 1px rgba(0, 0, 0, 0.19);
overflow: hidden;
margin-bottom: 2px;
}
table.responsive-table tfoot > tr > td {
overflow: hidden;
min-width: 77px
}
table.responsive-table thead,
table.responsive-table thead > tr {
display: table-cell;
text-align: -webkit-auto;
vertical-align: -webkit-auto;
min-width: 77px;
border-bottom: none !important;
margin-left: -1px;
margin-right: -1px;
float: left;
box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.24), 0 0 1px 0 rgba(0, 0, 0, 0.19)
}
table.responsive-table thead > tr > th {
min-width: 77px;
overflow: visible;
margin-right: -10px;
}
table.responsive-table tfoot tr {
display: table-cell;
position: relative;
min-width: 74px;
padding: 1%;
padding-right: 10;
}
table.responsive-table tfoot tr td {
vertical-align: middle;
text-align: center;
}
table.responsive-table tfoot tr td::before {
content: "\00a0";
}
}
.modal.light {
background-color: #E0E0E0;
}
.modal.dark {
background-color: #303030;
}
.modal.dark > .modal-footer {
background-color: #212121
}
.modal.dark > .modal-footer > a {
color: rgba(255, 255, 255, 0.87)
}
/*######################################################################################
All of the Table attrs from mtrlz
table {
border-collapse: collapse;
border-spacing: 0
}
td,th {
padding: 0
}
table,th,td {
border: none
}
table {
width: 100%;
display: table
}
table.bordered>thead>tr,table.bordered>tbody>tr,
table.bordered>thead>tr,table.bordered>tfoot>tr{
border-bottom: 1px solid #d0d0d0
}
table.striped>tbody>tr:nth-child(odd) {
background-color: #f2f2f2
}
table.striped>tbody>tr>td {
border-radius: 0
}
table.highlight>tbody>tr {
transition: background-color .25s ease
}
table.highlight>tbody>tr:hover {
background-color: #f2f2f2
}
table.centered thead tr th,table.centered tbody tr td,
table.centered tfoot tr td{
text-align: center
}
thead {
border-bottom: 1px solid #d0d0d0
}
tfoot {
border-top: 1px solid #d0d0d0
}
td,th {
padding: 15px 5px;
display: table-cell;
text-align: -webkit-center;
vertical-align: middle;
border-radius: 2px;
}
@media only screen and (max-width: 992px) {
table.responsive-table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative
}
table.responsive-table td:empty:before {
content: '\00a0'
}
table.responsive-table th,table.responsive-table td {
margin: 0;
vertical-align: top
}
table.responsive-table th {
text-align: left
}
table.responsive-table thead {
display: block;
float: left;
box-shadow: -3px -1px 1px 0 rgba(0,0,0,0.24),0 2px 1px 0 rgba(0,0,0,0.19)
}
table.responsive-table tfoot{
display: block;
float: right
}
table.responsive-table thead tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table tfoot tr {
display: block;
padding: 0 10px 0 0
}
table.responsive-table thead tr th::before {
content: "\00a0"
}
table.responsive-table tfoot tr th::before {
content: "\00a0"
}
table.responsive-table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap
}
table.responsive-table tbody tr {
display: inline-block;
vertical-align: top
}
table.responsive-table th {
display: block;
text-align: right
}
table.responsive-table td {
display: block;
min-height: 1.25em;
text-align: left
}
table.responsive-table tr {
padding: 0 10px
}
table.responsive-table thead {
border: 0;
border-right: 1px solid #d0d0d0
}
table.responsive-table tfoot {
border: 0;
border-right: 1px solid #d0d0d0
}
table.responsive-table.bordered th {
border-bottom: 0;
border-left: 0;
text-align: -webkit-auto;
}
table.responsive-table.bordered td {
border-left: 0;
border-right: 0;
border-bottom: 0
}
table.responsive-table.bordered tr {
border: 0
}
table.responsive-table.bordered tbody tr {
border-right: 1px solid #d0d0d0
}
}
######################################################################################*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment