Bootstrap Snippet Clean Tables using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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"));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Clean Tables"
Bootstrap 3.0.0 Snippet by marshallx

Related: See More

Questions / Comments:

"Clean Tables" Bootstrap 3.0.0 Snippet by marshallx

Related: See More

Questions / Comments:

"Clean Tables"
Bootstrap 3.0.0 Snippet by marshallx