"Clean Tables"
Bootstrap 3.0.0 Snippet by marshallx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- style prerequisites --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!-- development --> <div class="container"> <br> <br> <table id="tableTabs" class="noselect display"> <tbody> <tr> <td class="noselect tableTabs-tab"> <div data-isactive="false" data-istableholder="true" data-tabledata="1" class="noselect tableTabs-tab-enabled tableTabs-tab-content tableTabs-tab-content-inactive"> <div class="tableTabs-tab-content-highlight" data-color="#4485f4"></div> <div class="tableTabs-tab-content-content"> <div class="tableTabs-tab-content-content-img"> <i class="fa fa-send"></i> </div> <div class="tableTabs-tab-content-content-text">First Tab</div> </div> </div> </td> <td class="noselect tableTabs-tab"> <div data-isactive="false" data-istableholder="false" data-tabledata="2" class="noselect tableTabs-tab-enabled tableTabs-tab-content tableTabs-tab-content-inactive"> <div class="tableTabs-tab-content-highlight" data-color="#f04444"></div> <div class="tableTabs-tab-content-content"> <div class="tableTabs-tab-content-content-img"> <i class="fa fa-mail-reply"></i> </div> <div class="tableTabs-tab-content-content-text">Second Tab</div> </div> </div> </td> <td class="noselect tableTabs-tab-last"> <div class="noselect tableTabs-tab-disabled tableTabs-tab-content tableTabs-tab-content-inactive"> <div class="tableTabs-tab-content-highlight"></div> <div class="tableTabs-tab-content-content"> <div class="tableTabs-tab-content-content-last"> </div> </div> </div> </td> <td class="noselect tableTabs-tab tableTabs-tab-squish"> <div class="noselect tableTabs-tab-content tableTabs-tab-content-squish"></div> </td> </tr> <tr> <td class="noselect tableTabs-mattress" colspan="100%"></td> </tr> </tbody> </table> <table id="tableData" class="display" cellspacing="0" width="100%"> <thead> <tr> <th class="tableToolsColumn"></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> </tr> </thead> <tfoot style="display: none;"> <tr> <th class="tableToolsColumn"></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> </tr> </tfoot> <tbody> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> <tr> <td class="tableToolsColumn"></td> <td>TT929292</td> <td>Random Text</td> <td>Another Column</td> <td>22,000</td> <td>2020/01/20</td> </tr> </tbody> </table> </div> <!-- js prerequisites --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
/* New Classes */ .noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #tableTabs { font-family: Roboto, arial, sans-serif; font-size: 13px; table-layout: fixed; border-spacing: 0; display: table; border-collapse: separate; } .tableToolsColumn { display: none; } #tableTabs td { font-family: Roboto, arial, sans-serif; font-size: 13px; overflow: hidden; cellpadding: 0; } #tableTabs td:first-child { border-top-left-radius: 5px; } #tableTabs td:nth-last-child(2) { border-top-right-radius: 5px; border-right: 1px solid #d7d7d7; } #tableTabs td:last-child { border-left: 0px; border-right: 0px; border-top: 0px; } .tableTabs-mattress { background: rgba(255,255,255,.9); /*border-bottom: 1px solid #d7d7d7;*/ height: 0px; position: relative; } .tableTabs-tab { border: 1px solid #d7d7d7; border-right: 0px; min-width: 220px; cursor: pointer; height: 30px; } .tableTabs-tab-last { border: 1px solid #d7d7d7; border-right: 0px; cursor: pointer; height: 30px; } .tableTabs-tab-content { height: 100%; } .tableTabs-tab-content-active { border-bottom-color: transparent; color: #000; } .tableTabs-tab-content-inactive { color: #787878; background: rgba(243,243,243,.85); border-bottom-color: #d7d7d7; } .tableTabs-tab-content-inactive:hover { color: #4a4949; background: #fbfbfb; } .tableTabs-tab-content-squish { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; width: 100%; cursor: default!important; } .tableTabs-tab-squish { width: 100%; } .tableTabs-tab-content-highlight { margin: -1px; height: 2px; } .tableTabs-tab-content-content-img { display: inline-block; text-align: right; width: 22px; } .tableTabs-tab-content-content-text { display: inline-block; padding: 4px; text-align: left; } .tableTabs-tab-content-content-last { display: inline-block; text-align: right; width: 20px; } /* Standard Classes */ table.dataTable { width: 100%; margin: 0 auto; clear: both; border-collapse: separate; border-spacing: 0 } table.dataTable thead th, table.dataTable tfoot th { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; text-transform: uppercase; padding: 6px; color: #505050; } table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid #d7d7d7; } table.dataTable thead th:active, table.dataTable thead td:active { outline: none } table.dataTable tfoot th, table.dataTable tfoot td { padding: 10px 18px 6px 18px; border-top: 1px solid #d7d7d7; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { cursor: pointer; *cursor: hand; background-repeat: no-repeat; background-position: center right } table.dataTable thead .sorting { background-image: url("DataTables-1.10.16/images/sort_both.png") } table.dataTable thead .sorting_asc { background-image: url("DataTables-1.10.16/images/sort_asc.png") } table.dataTable thead .sorting_desc { background-image: url("DataTables-1.10.16/images/sort_desc.png") } table.dataTable thead .sorting_asc_disabled { background-image: url("DataTables-1.10.16/images/sort_asc_disabled.png") } table.dataTable thead .sorting_desc_disabled { background-image: url("DataTables-1.10.16/images/sort_desc_disabled.png") } table.dataTable tbody tr { background-color: #efefef; cursor: pointer; } table.dataTable tbody tr.selected { background-color: #B0BED9; } table.dataTable tbody th, table.dataTable tbody td { font-size: 13px; padding: 3px; border-bottom: 1px #e5e5e5 solid; } table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { /*border-top: 1px solid #ddd*/ } table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td { border-top: none } table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { border-top: 1px solid #ddd; border-right: 1px solid #ddd } table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child { border-left: 1px solid #ddd } table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td { border-top: none } table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: #f8f8f8 } table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected { background-color: #f8f8f8 } table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background-color: #fff; } table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected { background-color: #fff; } table.dataTable.order-column tbody tr>.sorting_1, table.dataTable.order-column tbody tr>.sorting_2, table.dataTable.order-column tbody tr>.sorting_3, table.dataTable.display tbody tr>.sorting_1, table.dataTable.display tbody tr>.sorting_2, table.dataTable.display tbody tr>.sorting_3 { background-color: #fafafa } table.dataTable.order-column tbody tr.selected>.sorting_1, table.dataTable.order-column tbody tr.selected>.sorting_2, table.dataTable.order-column tbody tr.selected>.sorting_3, table.dataTable.display tbody tr.selected>.sorting_1, table.dataTable.display tbody tr.selected>.sorting_2, table.dataTable.display tbody tr.selected>.sorting_3 { background-color: #acbad5 } table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 { background-color: #f1f1f1 } table.dataTable.display tbody tr.odd>.sorting_2, table.dataTable.order-column.stripe tbody tr.odd>.sorting_2 { background-color: #f3f3f3 } table.dataTable.display tbody tr.odd>.sorting_3, table.dataTable.order-column.stripe tbody tr.odd>.sorting_3 { background-color: whitesmoke } table.dataTable.display tbody tr.odd.selected>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1 { background-color: #a6b4cd } table.dataTable.display tbody tr.odd.selected>.sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2 { background-color: #a8b5cf } table.dataTable.display tbody tr.odd.selected>.sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3 { background-color: #a9b7d1 } table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 { background-color: #fafafa } table.dataTable.display tbody tr.even>.sorting_2, table.dataTable.order-column.stripe tbody tr.even>.sorting_2 { background-color: #fcfcfc } table.dataTable.display tbody tr.even>.sorting_3, table.dataTable.order-column.stripe tbody tr.even>.sorting_3 { background-color: #fefefe } table.dataTable.display tbody tr.even.selected>.sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1 { background-color: #acbad5 } table.dataTable.display tbody tr.even.selected>.sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2 { background-color: #aebcd6 } table.dataTable.display tbody tr.even.selected>.sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3 { background-color: #afbdd8 } table.dataTable.display tbody tr:hover>.sorting_1, table.dataTable.order-column.hover tbody tr:hover>.sorting_1 { background-color: #eaeaea } table.dataTable.display tbody tr:hover>.sorting_2, table.dataTable.order-column.hover tbody tr:hover>.sorting_2 { background-color: #ececec } table.dataTable.display tbody tr:hover>.sorting_3, table.dataTable.order-column.hover tbody tr:hover>.sorting_3 { background-color: #efefef } table.dataTable.display tbody tr:hover.selected>.sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1 { background-color: #a2aec7 } table.dataTable.display tbody tr:hover.selected>.sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2 { background-color: #a3b0c9 } table.dataTable.display tbody tr:hover.selected>.sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3 { background-color: #a5b2cb } table.dataTable.no-footer { border-bottom: 1px solid #111 } table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap } table.dataTable.compact thead th, table.dataTable.compact thead td { padding: 4px 17px 4px 4px } table.dataTable.compact tfoot th, table.dataTable.compact tfoot td { padding: 4px } table.dataTable.compact tbody th, table.dataTable.compact tbody td { padding: 4px } table.dataTable th.dt-left, table.dataTable td.dt-left { text-align: left } table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty { text-align: center } table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: right } table.dataTable th.dt-justify, table.dataTable td.dt-justify { text-align: justify } table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap { white-space: nowrap } table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left { text-align: left } table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center { text-align: center } table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right { text-align: right } table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify { text-align: justify } table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap { white-space: nowrap } table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left { text-align: left } table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center { text-align: center } table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right { text-align: right } table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify { text-align: justify } table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap { white-space: nowrap } table.dataTable, table.dataTable th, table.dataTable td { box-sizing: content-box } .dataTables_wrapper { position: relative; clear: both; *zoom: 1; zoom: 1 } .dataTables_wrapper .dataTables_length { float: left } .dataTables_wrapper .dataTables_filter { float: right; text-align: right } .dataTables_wrapper .dataTables_filter input { margin-left: 0.5em } .dataTables_wrapper .dataTables_info { clear: both; float: left; padding-top: 0.755em } .dataTables_wrapper .dataTables_paginate { float: right; text-align: right; padding-top: 0.25em } .dataTables_wrapper .dataTables_paginate .paginate_button { box-sizing: border-box; display: inline-block; min-width: 1.5em; padding: 0.5em 1em; margin-left: 2px; text-align: center; text-decoration: none !important; cursor: pointer; *cursor: hand; color: #333 !important; border: 1px solid transparent; border-radius: 2px } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #333 !important; border: 1px solid #979797; background-color: white; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc)); background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%); background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%) } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { cursor: default; color: #666 !important; border: 1px solid transparent; background: transparent; box-shadow: none } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: white !important; border: 1px solid #d7d7d7; background-color: #585858; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111)); background: -webkit-linear-gradient(top, #585858 0%, #111 100%); background: -moz-linear-gradient(top, #585858 0%, #111 100%); background: -ms-linear-gradient(top, #585858 0%, #111 100%); background: -o-linear-gradient(top, #585858 0%, #111 100%); background: linear-gradient(to bottom, #585858 0%, #111 100%) } .dataTables_wrapper .dataTables_paginate .paginate_button:active { outline: none; background-color: #2b2b2b; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c)); background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%); box-shadow: inset 0 0 3px #111 } .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 1em } .dataTables_wrapper .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 100%; height: 40px; margin-left: -50%; margin-top: -25px; padding-top: 20px; text-align: center; font-size: 1.2em; background-color: white; background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%) } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: #333 } .dataTables_wrapper .dataTables_scroll { clear: both } .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { *margin-top: -1px; -webkit-overflow-scrolling: touch } .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td { vertical-align: middle } .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing { height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important } .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #111 } .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody>table { border-bottom: none } .dataTables_wrapper:after { visibility: hidden; display: block; content: ""; clear: both; height: 0 } @media screen and (max-width: 767px) { .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: center } .dataTables_wrapper .dataTables_paginate { margin-top: 0.5em } } @media screen and (max-width: 640px) { .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: center } .dataTables_wrapper .dataTables_filter { margin-top: 0.5em } }
$(document).ready(function() { InitEvents(); CreateTable(); }); function InitEvents() { $('[data-toggle="tooltip"]').tooltip(); $(".tableTabs-tab-enabled").click(function() { TabClassToggle(this); }); ResetView(); } function ResetView() { TabClassToggle($("#tableTabs").find('td:first').find('div:first')); } function TabClassToggle(element) { var needAjaxData = false; if (element !== null && $(element).data("isactive") !== true) { if ($(element).data("istableholder") == true) { if ($(element).data("tabledata") !== null) { needAjaxData = true; } } RemoveActiveTabClasses(); $(element).removeClass("tableTabs-tab-content-inactive"); $(element).addClass("tableTabs-tab-content-active"); var highlightElement = $(element).find(".tableTabs-tab-content-highlight"); highlightElement.css("background-color", highlightElement.data("color")); $(element).parent().css("border-bottom-width", "0px").css("border-top-color", highlightElement.data("color")); } } function RemoveActiveTabClasses() { $("#tableTabs").find(".tableTabs-tab").css("border-bottom-width", "1px").css("border-top-color", "#d7d7d7"); $("#tableTabs").find(".tableTabs-tab-content-active").removeClass("tableTabs-tab-content-active").addClass("tableTabs-tab-content-inactive"); $("#tableTabs").find(".tableTabs-tab-content-highlight").css("background-color", "transparent"); } function CreateTable() { $("#tableData").DataTable({ "paging": false, "ordering": false, "info": false, "searching": false }); InitTableToolsColumn(); } function InitTableToolsColumn() { }

Related: See More


Questions / Comments: