content logo

Bootstrap Tables:

Bootstrap Sliding Table

Tables are a nice feature for both function and style. They offer a vast range of designing options which only needs your creativity and innovation. With that said, web designers usually use some common table styles. The basic one is the tables with grids. This is pretty much the spreadsheet everyone uses with horizontal lines. It does get the job done; however, all the simple grids can be distracting. This table is only good for very dense data. another type of table only includes horizontal lines and no vertical ones. It does reduce the distracting features by removing some lines so it works well with any information but it is too basic. The zebra stripes offer colourful backgrounds as well which is perfect to focus on a single cell or row. Last but not least, we have the tables with more asymmetrical shapes and designs. These look way different from the normal tables you are used to.

The table we have here in this post is a Bootstrap sliding table. It features a lot of unique and special effects. Basically, a number of Bootstrap tables are available in the code and each table can be displayed in a Bootstrap slider. This beautiful Bootstrap CSS table helps reduce the physical space needed for adding more tables.

#

Bootstrap Sliding Table

#

Bootstrap Table

#

Bootstrap CSS Table

#

Bootstrap Slider

<!-- This script got from frontendfreecode.com -->
<h1>Bootstrap Table</h1>
<section id="three">
    <div class="container">
        <div class="gallery js-flickity" data-flickity-options="{ &quot;wrapAround&quot;: true }">
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />CONDIMENTS
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">BBQ Sauce</td>
                            <td style="border-top: 0px;">1</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Gravy</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Honey</td>
                            <td class="highlight">2</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Hot Sauce</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Salsa</td>
                            <td>2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />DAIRY
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Butter</td>
                            <td style="border-top: 0px;">3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Yogurt</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Creamer</td>
                            <td class="highlight">4</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Sour Cream</td>
                            <td>TBD</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Whipped Cream</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />VEGETABLES
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Asparagus</td>
                            <td style="border-top: 0px;">5</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Carrots</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Cucumbers</td>
                            <td class="highlight">4</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Lettuce</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Onions</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />BEVERAGES
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Beer</td>
                            <td style="border-top: 0px;">Lots</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Gin</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Whiskey</td>
                            <td class="highlight">2</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Juice</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Soda</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />SPICES & HERBS
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Basil</td>
                            <td style="border-top: 0px;">6</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Cilantro</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Garlic</td>
                            <td class="highlight">7</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Ginger</td>
                            <td>14</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Oregano</td>
                            <td>7</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
h1 {text-align:center; margin-bottom:30px; font-family:Arial, Helvetica, sans-serif; color:#d31245;}
#three {
  background-color: #fff;
  border-bottom: none;
  margin-bottom: .25em;
}
#three .table-responsive {
  display: none;
  position: relative;
  top: -4.6em;
}
.container {
    width: 100%;
}
#three .table-responsive-mobile {
  display: block;
  width: 50%;
  opacity: 0.7;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
#three .table-responsive-mobile.is-selected {
  box-shadow: rgba(0, 0, 0, 0.74902) 0px 0px 38px -4px;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.flickity-page-dots {   display: none; }
#three .table>tbody {
  text-align: center;
  color: #002D6A;
}
#three .table>tbody>tr>td.highlight {
  color: #d31245;
  font-weight: bold;
  font-size: 14.5px;
}
#three .table>thead>tr>th {
  text-align: center;
  border-bottom: 0px solid #ddd;
  font-weight: normal;
  font-size: 1.2em;
}
#three .table>tbody>tr>td {
  border-top: 1px solid #d31245
}
.table-responsive-mobile td:first-child {
  padding-left: 20px
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='http://frontendfreecode.com/codes/files/flickity.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='http://frontendfreecode.com/codes/files/flickity.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script>
<style>
h1 {text-align:center; margin-bottom:30px; font-family:Arial, Helvetica, sans-serif; color:#d31245;}
#three {
  background-color: #fff;
  border-bottom: none;
  margin-bottom: .25em;
}
#three .table-responsive {
  display: none;
  position: relative;
  top: -4.6em;
}
.container {
    width: 100%;
}
#three .table-responsive-mobile {
  display: block;
  width: 50%;
  opacity: 0.7;
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
#three .table-responsive-mobile.is-selected {
  box-shadow: rgba(0, 0, 0, 0.74902) 0px 0px 38px -4px;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.flickity-page-dots {   display: none; }
#three .table>tbody {
  text-align: center;
  color: #002D6A;
}
#three .table>tbody>tr>td.highlight {
  color: #d31245;
  font-weight: bold;
  font-size: 14.5px;
}
#three .table>thead>tr>th {
  text-align: center;
  border-bottom: 0px solid #ddd;
  font-weight: normal;
  font-size: 1.2em;
}
#three .table>tbody>tr>td {
  border-top: 1px solid #d31245
}
.table-responsive-mobile td:first-child {
  padding-left: 20px
}
</style>

</head>
<body>
<h1>Bootstrap Table</h1>
<section id="three">
    <div class="container">
        <div class="gallery js-flickity" data-flickity-options="{ &quot;wrapAround&quot;: true }">
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />CONDIMENTS
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">BBQ Sauce</td>
                            <td style="border-top: 0px;">1</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Gravy</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Honey</td>
                            <td class="highlight">2</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Hot Sauce</td>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Salsa</td>
                            <td>2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />DAIRY
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Butter</td>
                            <td style="border-top: 0px;">3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Yogurt</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Creamer</td>
                            <td class="highlight">4</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Sour Cream</td>
                            <td>TBD</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Whipped Cream</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />VEGETABLES
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Asparagus</td>
                            <td style="border-top: 0px;">5</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Carrots</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Cucumbers</td>
                            <td class="highlight">4</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Lettuce</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Onions</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />BEVERAGES
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Beer</td>
                            <td style="border-top: 0px;">Lots</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Gin</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Whiskey</td>
                            <td class="highlight">2</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Juice</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Soda</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-responsive-mobile">
                <table class="table" border="0">
                    <thead>
                        <tr style="background-color: #002d6a; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;">
                            <th style="text-align: center;" colspan="2">
                                <hr />SPICES & HERBS
                                <hr />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: left; border-top: 0px;">Basil</td>
                            <td style="border-top: 0px;">6</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Cilantro</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td class="highlight" style="text-align: left;">Garlic</td>
                            <td class="highlight">7</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Ginger</td>
                            <td>14</td>
                        </tr>
                        <tr>
                            <td style="text-align: left;">Oregano</td>
                            <td>7</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview