Responsive DataTable UI Design | HTML5 | CSS3 | Bootstrap | Jquery.

November 14, 2020

As you already know Tables are an important part of HTML. though they were usually used in the past for layout, today they’re mainly used for marking up information. Since the adoption of responsive web design, various approaches have been developed for establishing tables that can scale well in several viewport sizes.

In this article, I’ll go over and analyze many of those approaches. keep in mind that I’ll be focused mostly on the JQuery -based ones, as I feel they provide more options and features compared to the pure CSS solutions. to make things easier and clearer, this article is full of helpful images and demo.

I have this issue I did not see throughout development but it happens to my client. I will use jQuery DataTables to let the user complete with information. On a big/normal resolution this doesn’t happen because the DataTables can show all the columns.

But on the lower resolution, the grid shows a green plus button, and the controls “inside” that group isn’t initialized correctly. Before diving into the core methods, let’s have a look at the example table that will be used throughout this article to demonstrate the different ways for achieving responsive tables.

Maybe you’re coming up with something like that right away. in all the mentioned cases, people will expect tables. Not those fancy ones from design inspiration sites but Excel-looking monsters with many cells and complex interaction.

Play Video

In that case, a designer faces many challenges. for instance, matching design with existing frontend frameworks or scuffling with “uncomfortable” data that smashes the layout. Keeping these things in mind, I have created this data table. I hope this will be very helpful to you.

This article contains distribution files for the Responsive extension for DataTables. only the core software for this library is contained during this package – to be properly styled, a styling package for Responsive must also be included. Styling options include DataTable’s native styling, Bootstrap, and Foundation.

In the present time of responsive web, design tables can usually cause a particular problem for designers due to their row-based layout. Responsive is an extension for DataTables that resolves that problem by optimizing the table’s layout for different screen sizes through the dynamic insertion and removal of columns from the table.

Trying to suit a data table into an email is like {trying|making an attempt|attempting} to suit an elephant into a fridge, no matter how much you are trying, it ain’t gonna budge!
The question quickly becomes, do we really want this? (Which is truly an excellent question, because much of the time, we don’t.)

To create a responsive table with Bootstrap, you have to wrap the table inside a div element with a class of table-responsive. By default, Bootstrap applies the overflow-x: auto property to this wrapper element. once the browser window is less than 768px, the overflow-y: the hidden property is applied. Therefore, on little devices, you can see the contents of your tables by scrolling horizontally.

Can’t we just put it on a website and have users click through to it? No, don’t create me click more than I would like to, and don’t make me think! And no, don’t put my sensitive information on your website — it’s in enough places already!

It got me thinking — does it really need to be in a table? Could we transform the table? Could we force it to display in portrait mode rather than landscape? Could we color code it so that only the relevant information stands out?

The simple answer is that it doesn’t need to in a table at all. The data could go into a ‘card’ (a box) — something the web world has been using for years (keyphrase Card UI or CSS Card).

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Responsive DataTable UI Design</title>
</head>
<body>
    <div class="container p-30">
        <div class="row">
            <div class="col-md-12 main-datatable">
                <div class="card_body">
                    <div class="row d-flex">
                        <div class="col-sm-4 createSegment"> 
                         <a class="btn dim_button create_new"> <span class="glyphicon glyphicon-plus"></span> Create New</a>
                        </div>
                        <div class="col-sm-8 add_flex">
                            <div class="form-group searchInput">
                                <label for="email">Search:</label>
                                <input type="search" class="form-control" id="filterbox" placeholder=" ">
                            </div>
                        </div> 
                    </div>
                    <div class="overflow-x">
                        <table style="width:100%;" id="filtertable" class="table cust-datatable dataTable no-footer">
                            <thead>
                                <tr>
                                    <th style="min-width:50px;">ID</th>
                                    <th style="min-width:150px;">Name</th>
                                    <th style="min-width:150px;">Mode</th>
                                    <th style="min-width:100px;">Event</th>
                                    <th style="min-width:100px;">Date</th>
                                    <th style="min-width:150px;">Status</th>
                                    <th style="min-width:150px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_process">Processing</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_on">Active</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_done">Completed</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_off">Inactive</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr> 
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_process">Processing</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_on">Active</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_done">Completed</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_off">Inactive</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_process">Processing</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_on">Active</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_done">Completed</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_off">Inactive</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_process">Processing</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_on">Active</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_done">Completed</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_off">Inactive</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>Dummy</td>
                                    <td><span class="mode mode_process">Processing</span></td>
                                    <td>Journey</td>
                                    <td>17-Apr-2020</td>
                                    <td><span class="mode mode_on">Active</span></td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                            <i class="fa fa-pencil-square-o"></i> </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                                <li>
                                                    <a href="#" target="_blank">
                                                        Dummy Details
                                                    </a>
                                                </li>  
                                            </ul>
                                        </div>
                                        <span class="actionCust">
                                            <a href="#"><i class="fa fa-line-chart"></i></a>
                                        </span>
                                        <div class="btn-group">
                                            <a class="dropdown-toggle dropdown_icon" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </a>
                                            <ul class="dropdown-menu dropdown_more">
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-clone"></i>Duplicate
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" target="_black">
                                                        <i class="fa fa-list"></i>Activity</a>
                                                    </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>         
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

body{
    font-family: 'Raleway', sans-serif;
    background: #f9f9f9;
}
.p-30{
    padding:30px;
}
.main-datatable {
    padding: 0px; 
    border: 1px solid #f3f2f2;
    border-bottom: 0;
    box-shadow: 0px 2px 10px rgba(0,0,0,.05);
}
.d-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card_body{ 
    background-color: white;
    border: 1px solid transparent;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.main-datatable .row {
    margin: 0;
} 
.searchInput {
    width: 50%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    margin: 20px 0px;
    padding: 0px 4px;
}
.searchInput input {
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    margin-left: 8px;
    height: 34px;
    width: 100%;
    padding: 0px 25px 0px 10px;
    transition: all .6s ease;
}
.searchInput label {
    color: #767676;
    font-weight: normal;
}
.searchInput input:placeholder-shown {
    width: 13%;
}
.searchInput:hover input:placeholder-shown {
    width: 100%;
    cursor: pointer;
}
.searchInput:after {
    font-family: 'FontAwesome';
    color: #d4d4d4;
    position: relative;
    content: "\f002";
    right: 25px;
}

.dim_button {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding-top: 6px;
    background: rgb(57, 85, 136);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 20px;
} 
.createSegment a { 
    margin-bottom: 0px;
    border-radius: 50px;
    background: #ffffff;
    border: 1px solid #007bff;
    color: #007bff;
    transition: all .4s ease;
}
.createSegment a:hover, .createSegment a:focus {
    transition: all .4s ease;
    background: #007bff;
    color: #fff;
}
.add_flex{
    display: flex;
    justify-content: flex-end;
    padding-right:0px;
}
.main-datatable .dataTable.no-footer {
    border-bottom: 1px solid #eee;
}
.main-datatable .cust-datatable thead {
    background-color: #f9f9f9;
}
.main-datatable .cust-datatable>thead>tr>th {
    border-bottom-width: 0;
    color: #443f3f;
    font-weight: 600;
    padding: 16px 15px;
    vertical-align: middle;
    padding-left: 18px;
    text-align: center;
}
.main-datatable .cust-datatable>tbody td {
    padding: 10px 15px 10px 18px;
    color: #333232;
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
    border-color: #eee;
    text-align: center;
    vertical-align: middle;
}
.main-datatable .cust-datatable>tbody tr {
    border-top: none;
}
.main-datatable .table > tbody > tr:nth-child(even) {
    background: #f9f9f9;
}
.btn-group.open .dropdown-toggle {
    box-shadow: none;
}
.main-datatable .dropdown_icon {
    display: inline-block;
    color: #8a8a8a;
    font-size: 12px;
    border: 1px solid #d4d4d4;
    padding: 10px 11px;
    border-radius: 50%;
    cursor: pointer;
}
.btn-group i{
    color: #8e8e8e; 
    margin: 2px;
}
.main-datatable .actionCust a {
    display: inline-block;
    color: #8a8a8a;
    font-size: 12px;
    border: 1px solid #d4d4d4;
    padding: 10px 11px;
    margin: -9px 3px;
    border-radius: 50%;
    cursor: pointer;
}
.main-datatable .actionCust a i{
    color: #8e8e8e;
    margin: 2px;
}
.main-datatable .dropdown-menu {
    padding: 0;
    border-radius: 4px;
    box-shadow: 10px 10px 20px #c8c8c8;
    margin-top: 10px;
    left: -65px;
    top: 32px;
}
.main-datatable .dropdown-menu > li > a {
    display: block;
    padding: 12px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857;
    color: #333333;
    white-space: nowrap;
    border-bottom: 1px solid #d4d4d4;
}
.main-datatable .dropdown-menu > li > a:hover, 
.main-datatable .dropdown-menu > li > a:focus {
    color: #fff;
    background: #007bff;
}
.main-datatable .dropdown-menu > li > a:hover i{
    color: #fff; 
}
.main-datatable .dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 78px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #d4d4d4;
    border-left: 7px solid transparent;
    border-bottom-color: #d4d4d4;
    content: '';
}
.main-datatable .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 78px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}
.dropdown-menu i {
    margin-right: 8px;
}
.main-datatable .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #999999 !important;
    background-color: #f6f6f6 !important;
    border-color: #d4d4d4 !important;
    border-radius: 40px;
    margin: 5px 3px;
}
.main-datatable .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    border: 1px solid #3d96f5 !important;
    background: #4da3ff !important;
    box-shadow: none;
}
.main-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.main-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border-color: transparent !important;
    background: #007bff !important;
}
.main-datatable .dataTables_paginate {
    padding-top: 0 !important;
    margin: 15px 10px;
    float: right !important;
}
.mode{
    padding:4px 10px;
    line-height: 13px;
    color:#fff;
    font-weight: 400;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    font-size:11px;
    letter-spacing: 0.4px;
}
.mode_on{
    background-color: #09922d;
}
.mode_off{
    background-color: #8b9096;
}
.mode_process{
    background-color: #ff8000;
}
.mode_done{
    background-color: #03a9f3;
}
@media only screen and (max-width:1200px){
    .overflow-x{
        overflow-x:scroll;
    }
    .overflow-x::-webkit-scrollbar{
        width:5px;
        height:6px;
    }
    .overflow-x::-webkit-scrollbar-thumb{
        background-color: #888;
    }
    .overflow-x::-webkit-scrollbar-track{
         background-color: #f1f1f1;
    }
}

JS

49 thoughts on “Responsive DataTable UI Design | HTML5 | CSS3 | Bootstrap | Jquery.”

Salvador says:

December 8, 2020 at 1:42 pm

Thank you for this verey good posts. I was wanting to know whethedr you were planning of publishing
simikar posts to this. Keeep up writing sujperb content articles!

my page home warranty cost

Reply
Isobel says:

December 11, 2020 at 12:32 am

Hi there to every body, it’s my first pay a quick visit of this website;this blog contazins awesome and genuinely
excellent data for visitors.

Look at my webpage: home warranty cost

Reply
Marti says:

December 15, 2020 at 4:07 pm

I have found very interestng your article.It’s prtty worth enough
for me. In my view, if all website owners and bloggers made goodd content as you did, the web will be a lott more useful than ever before.

Reply
Ann says:

December 16, 2020 at 9:21 am

Very good post! We will be linking to tis great content on our
website.Keep up the great writing!

Reply
Sima says:

January 29, 2021 at 3:58 pm

I all the time used to study article in news papers but now as I am a user of web
so from now, I am using net for articles or
reviews, thanks to the web.

Reply
Adelaide says:

January 29, 2021 at 10:10 pm

Hello would you mind letting me know which webhost you’re working with?
I’ve loaded your blog in 3 completely different web browsers and I must say
this blog loads a lot quicker then most. Can you suggest a good web hosting provider at a
honest price? Thanks a lot, I appreciate it!

Reply
1. Code4Education says:
  
  January 30, 2021 at 12:18 pm
  
  Please Connect with us from Instagram your all queries will be solved there.
  https://www.instagram.com/code4education/
  
  Reply
Edgardo says:

January 30, 2021 at 10:41 am

Ahaa, its good discussion regarding this post here at this webpage, I have read all that, so
now me also commenting at this place.

Reply
Hanna says:

February 13, 2021 at 8:35 am

Wow, amazing blog layout! How long have you been blogging for?
yoou made blogging look easy. The overall look of your web site is excellent,as well as
the content.

Reply
https://www.yamatocosmos.com says:

February 19, 2021 at 4:14 am

Best view i have ever seen !

Reply
Ma says:

February 22, 2021 at 7:56 pm

I think this is onne of tthe most important information ffor me.
And i am glad reading your article. But wanna remark on few general things, The web site style is perfect, the articles is really great!

Reply
Valeria says:

March 9, 2021 at 8:51 am

I am really glad to glance at this web site posts which includes lots of useful data, thanks for providing such data.

Reply
https://www.shinsen-mart.com says:

March 15, 2021 at 5:46 am

Best view i have ever seen !

Reply
Devon says:

March 15, 2021 at 9:55 pm

Awesome post.

Reply
https://uchinoshitsuji.com says:

March 29, 2021 at 3:03 am

Best view i have ever seen !

Reply
Jessika says:

April 3, 2021 at 2:26 pm

Woah! I’m really enjoying the template/theme of this blog.
It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between user friendliness and appearance.
I must say you’ve done an excellent job with this.
Also, the blog loads very fast for me on Firefox. Outstanding Blog!

Reply
Valentin says:

April 7, 2021 at 11:49 am

Hi, just wanted to say, I loved this blog post.
It was inspiring. Keep on posting!

Reply
https://j-website.net says:

April 7, 2021 at 3:41 pm

Best view i have ever seen !

Reply
Stevie says:

April 8, 2021 at 5:35 am

You could definitely see your skills within the article you
write. The world hopes for even more passionate writers
like you who are not afraid to mention how they believe.

Reply
Martin says:

April 8, 2021 at 9:56 pm

Thanks for a marvelous posting! I truly enjoyed reading it, you will be a great author.
I will be sure to bookmark your blog and definitely will come back very soon. I want to
encourage you to continue your great job, have a nice morning!

Reply
Zelda says:

April 9, 2021 at 1:48 pm

I really like it when people come together and share views.
Great site, keep it up!

Reply
Dessie says:

April 9, 2021 at 3:27 pm

Great article.

Reply
Wilbur says:

May 16, 2021 at 12:42 pm

Hi there to every body, it’s my first go to see of this webpage; this webpage contains
amazing and really excellent data in support of readers.

Reply
https://j-website.net says:

June 1, 2021 at 1:26 pm

Best view i have ever seen !

Reply
zoritoler imol says:

September 2, 2022 at 12:16 pm

Super-Duper blog! I am loving it!! Will be back later to read some more. I am taking your feeds also.

Reply
vorbelutrioperbir says:

January 16, 2023 at 5:49 am

This is a topic close to my heart cheers, where are your contact details though?

Reply
zoritoler imol says:

March 19, 2023 at 11:40 am

Superb post however I was wondering if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit more. Thank you!

Reply
anti inflammatory diet cookbook says:

September 15, 2023 at 9:15 pm

Very informative blog.Really looking forward to read more. Really Great.

Reply
Powder Spices says:

September 17, 2023 at 4:33 am

Really informative article.Really looking forward to read more. Much obliged.

Reply
glass table lamp says:

September 30, 2023 at 10:17 am

Really appreciate you sharing this blog. Want more.

Reply
Charles Hudson says:

October 2, 2023 at 10:14 pm

I am continuously invstigating online for articles that can help me. Thx!

Reply
Play Zombie Frontier Shooter Online says:

November 29, 2023 at 5:19 pm

I am so grateful for your article.Really thank you!

Reply
janitor ai says:

November 29, 2023 at 8:28 pm

Say, you got a nice blog. Much obliged.

Reply
Hmall says:

November 30, 2023 at 10:11 am

I am so grateful for your blog.Thanks Again. Want more.

Reply
best paragliding in kamshet says:

December 16, 2023 at 2:54 pm

Really appreciate you sharing this blog post.Really looking forward to read more. Really Great.

Reply
this website says:

December 27, 2023 at 1:17 am

Pretty! This was an extremely wonderful article.Many thanks for supplying these details.

Reply
ai art says:

December 27, 2023 at 5:27 am

Very good article.Thanks Again. Really Great.

Reply
gb apk says:

December 27, 2023 at 7:51 pm

Really enjoyed this blog article.Thanks Again. Awesome.

Reply
pet hair robotic vacuum says:

December 29, 2023 at 3:34 am

Enjoyed examining this, very good stuff, thanks .

Reply
undressa ai says:

December 29, 2023 at 10:01 pm

A round of applause for your blog.Really thank you! Fantastic.

Reply
my response says:

December 30, 2023 at 2:30 pm

I loved your blog. Really Cool.

Reply
old laptop sell says:

January 1, 2024 at 8:51 pm

I loved your blog article.Really looking forward to read more. Will read on…

Reply
the pawna lake camping says:

January 21, 2024 at 11:27 am

This is one awesome post.Thanks Again. Really Cool.

Reply
mumbai university phd admission 2023-24 says:

January 23, 2024 at 4:52 am

Very good blog article.Really thank you! Keep writing.

Reply
human or not says:

April 14, 2024 at 1:44 pm

Very informative article post.Thanks Again.

Reply
dirty chat ai says:

April 25, 2024 at 1:56 pm

A round of applause for your article post.Thanks Again. Awesome.

Reply
Rizz AI says:

May 13, 2024 at 2:21 pm

Enjoyed every bit of your blog.Much thanks again. Really Great.

Reply
Kobold api says:

May 13, 2024 at 9:57 pm

Im obliged for the blog post. Really Cool.

Reply
janitor ai says:

May 21, 2024 at 8:42 pm

I loved your blog article.Thanks Again. Keep writing.

Reply