In this post we will see How to create custom design for JQuery DataTable using CSS. We will see 5 different CSS designs for DataTable with different Color Schemes along with CSS Hover and Pagination design. I have already created the static DataTable and using JQuery and DataTable.js. So data on it is all static. We will only discuss designing part here. You can download or view online Demo of the design you like or meet your project’s requirement. Three of them are Light theme and Two are dark themes. You can further customize the designs according to your ideas.
JQUERY DATATABLE CSS:
I hope you guys will like these designs. These are all from scratch and designed by me. You are free to use it in your next Web project.
Html Code:
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Users</title>
<script src="jquery-3.5.1.js"></script>
<script src="jquery.dataTables.min.js"></script>
<link href="jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"
rel="stylesheet"
/>
<link href="css/design5.css" rel="stylesheet" />
</head>
<body>
<div id="formContent">
<h2>Customer Info</h2>
<hr />
<table id="tblCustomer" class="display" style="width: 100%;">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Company</th>
<th scope="col">Relationship</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sven Ottlieb</td>
<td>Drachenblut Delikatessen</td>
<td>Customers</td>
<td>Aachen</td>
</tr>
<tr>
<td>Paula Wilson</td>
<td>Rattlesnake Canyon Grocery</td>
<td>Customers</td>
<td>Albuquerque</td>
</tr>
<tr>
<td>Rene Phillips</td>
<td>Old World Delicatessen</td>
<td>Customers</td>
<td>Anchorage</td>
</tr>
<tr>
<td>Regina Murphy</td>
<td>Grandma Kelly's Homestead</td>
<td>Suppliers</td>
<td>Ann Arbor</td>
</tr>
<tr>
<td>Eliane Noz</td>
<td>Gai pâturage</td>
<td>Suppliers</td>
<td>Annecy</td>
</tr>
<tr>
<td>Palle Ibsen</td>
<td>Vaffeljernet</td>
<td>Customers</td>
<td>Århus</td>
</tr>
<tr>
<td>Eduardo Saavedra</td>
<td>Galería del gastrónomo</td>
<td>Customers</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Carlos González</td>
<td>LILA-Supermercado</td>
<td>Customers</td>
<td>Barquisimeto</td>
</tr>
<tr>
<td>Cheryl Saylor</td>
<td>Bigfoot Breweries</td>
<td>Suppliers</td>
<td>Bend</td>
</tr>
<tr>
<td>Giovanni Rovelli</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Customers</td>
<td>Bergamo</td>
</tr>
<tr>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Customers</td>
<td>Berlin</td>
</tr>
<tr>
<td>Petra Winkler</td>
<td>Heli Süßwaren GmbH & Co. KG</td>
<td>Suppliers</td>
<td>Berlin</td>
</tr>
<tr>
<td>Yang Wang</td>
<td>Chop-suey Chinese</td>
<td>Customers</td>
<td>Bern</td>
</tr>
<tr>
<td>Jose Pavarotti</td>
<td>Save-a-lot Markets</td>
<td>Customers</td>
<td>Boise</td>
</tr>
<tr>
<td>Robb Merchant</td>
<td>New England Seafood Cannery</td>
<td>Suppliers</td>
<td>Boston</td>
</tr>
<tr>
<td>Maria Larsson</td>
<td>Folk och fä HB</td>
<td>Customers</td>
<td>Bräcke</td>
</tr>
<tr>
<td>Philip Cramer</td>
<td>Königlich Essen</td>
<td>Customers</td>
<td>Brandenburg</td>
</tr>
<tr>
<td>Catherine Dewey</td>
<td>Maison Dewey</td>
<td>Customers</td>
<td>Bruxelles</td>
</tr>
<tr>
<td>Patricio Simpson</td>
<td>Cactus Comidas para llevar</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Yvonne Moncada</td>
<td>Océano Atlántico Ltda.</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Sergio Gutiérrez</td>
<td>Rancho grande</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Liu Wong</td>
<td>The Cracker Box</td>
<td>Customers</td>
<td>Butte</td>
</tr>
<tr>
<td>André Fonseca</td>
<td>Gourmet Lanchonetes</td>
<td>Customers</td>
<td>Campinas</td>
</tr>
<tr>
<td>Manuel Pereira</td>
<td>GROSELLA-Restaurante</td>
<td>Customers</td>
<td>Caracas</td>
</tr>
<tr>
<td>Pascale Cartrain</td>
<td>Suprêmes délices</td>
<td>Customers</td>
<td>Charleroi</td>
</tr>
<tr>
<td>Patricia McKenna</td>
<td>Hungry Owl All-Night Grocers</td>
<td>Customers</td>
<td>Cork</td>
</tr>
<tr>
<td>Helen Bennett</td>
<td>Island Trading</td>
<td>Customers</td>
<td>Cowes</td>
</tr>
<tr>
<td>Horst Kloss</td>
<td>QUICK-Stop</td>
<td>Customers</td>
<td>Cunewalde</td>
</tr>
<tr>
<td>Sven Petersen</td>
<td>Nord-Ost-Fisch Handelsgesellschaft mbH</td>
<td>Suppliers</td>
<td>Cuxhaven</td>
</tr>
<tr>
<td>Yoshi Latimer</td>
<td>Hungry Coyote Import Store</td>
<td>Customers</td>
<td>Elgin</td>
</tr>
<tr>
<td>Howard Snyder</td>
<td>Great Lakes Food Market</td>
<td>Customers</td>
<td>Eugene</td>
</tr>
<tr>
<td>Martin Bein</td>
<td>Plutzer Lebensmittelgroßmärkte AG</td>
<td>Suppliers</td>
<td>Frankfurt</td>
</tr>
<tr>
<td>Renate Messner</td>
<td>Lehmanns Marktstand</td>
<td>Customers</td>
<td>Frankfurt a.M.</td>
</tr>
<tr>
<td>Michael Holz</td>
<td>Richter Supermarkt</td>
<td>Customers</td>
<td>Genève</td>
</tr>
<tr>
<td>Lars Peterson</td>
<td>PB Knäckebröd AB</td>
<td>Suppliers</td>
<td>Göteborg</td>
</tr>
<tr>
<td>Roland Mendel</td>
<td>Ernst Handel</td>
<td>Customers</td>
<td>Graz</td>
</tr>
<tr>
<td>Matti Karttunen</td>
<td>Wilman Kala</td>
<td>Customers</td>
<td>Helsinki</td>
</tr>
<tr>
<td>Felipe Izquierdo</td>
<td>LINO-Delicateses</td>
<td>Customers</td>
<td>I. de Margarita</td>
</tr>
<tr>
<td>Helvetius Nagy</td>
<td>Trail's Head Gourmet Provisioners</td>
<td>Customers</td>
<td>Kirkland</td>
</tr>
<tr>
<td>Jytte Petersen</td>
<td>Simons bistro</td>
<td>Customers</td>
<td>Kobenhavn</td>
</tr>
<tr>
<td>Henriette Pfalzheim</td>
<td>Ottilies Käseladen</td>
<td>Customers</td>
<td>Köln</td>
</tr>
<tr>
<td>Art Braunschweiger</td>
<td>Split Rail Beer & Ale</td>
<td>Customers</td>
<td>Lander</td>
</tr>
<tr>
<td>Anne Heikkonen</td>
<td>Karkki Oy</td>
<td>Suppliers</td>
<td>Lappeenranta</td>
</tr>
<tr>
<td>Alexander Feuer</td>
<td>Morgenstern Gesundkost</td>
<td>Customers</td>
<td>Leipzig</td>
</tr>
<tr>
<td>Martine Rancé</td>
<td>Folies gourmandes</td>
<td>Customers</td>
<td>Lille</td>
</tr>
<tr>
<td>Lino Rodriguez</td>
<td>Furia Bacalhau e Frutos do Mar</td>
<td>Customers</td>
<td>Lisboa</td>
</tr>
<tr>
<td>Isabel de Castro</td>
<td>Princesa Isabel Vinhos</td>
<td>Customers</td>
<td>Lisboa</td>
</tr>
<tr>
<td>Thomas Hardy</td>
<td>Around the Horn</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Victoria Ashworth</td>
<td>B's Beverages</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Elizabeth Brown</td>
<td>Consolidated Holdings</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Ann Devon</td>
<td>Eastern Connection</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Charlotte Cooper</td>
<td>Exotic Liquids</td>
<td>Suppliers</td>
<td>London</td>
</tr>
<tr>
<td>Simon Crowther</td>
<td>North/South</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Hari Kumar</td>
<td>Seven Seas Imports</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Christina Berglund</td>
<td>Berglunds snabbköp</td>
<td>Customers</td>
<td>Luleå</td>
</tr>
<tr>
<td>Niels Petersen</td>
<td>Lyngbysild</td>
<td>Suppliers</td>
<td>Lyngby</td>
</tr>
<tr>
<td>Mary Saveley</td>
<td>Victuailles en stock</td>
<td>Customers</td>
<td>Lyon</td>
</tr>
<tr>
<td>Martín Sommer</td>
<td>Bólido Comidas preparadas</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Diego Roel</td>
<td>FISSA Fabrica Inter. Salchichas S.A.</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Alejandra Camino</td>
<td>Romero y tomillo</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Peter Wilson</td>
<td>Specialty Biscuits, Ltd.</td>
<td>Suppliers</td>
<td>Manchester</td>
</tr>
<tr>
<td>Hanna Moos</td>
<td>Blauer See Delikatessen</td>
<td>Customers</td>
<td>Mannheim</td>
</tr>
<tr>
<td>Laurence Lebihan</td>
<td>Bon app'</td>
<td>Customers</td>
<td>Marseille</td>
</tr>
<tr>
<td>Ian Devling</td>
<td>Pavlova, Ltd.</td>
<td>Suppliers</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Ana Trujillo</td>
<td>Ana Trujillo Emparedados y helados</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Antonio Moreno</td>
<td>Antonio Moreno Taquería</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>Centro comercial Moctezuma</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Guillermo Fernández</td>
<td>Pericles Comidas clásicas</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Miguel Angel Paolino</td>
<td>Tortuga Restaurante</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Marie Delamare</td>
<td>Escargots Nouveaux</td>
<td>Suppliers</td>
<td>Montceau</td>
</tr>
<tr>
<td>Jean-Guy Lauzon</td>
<td>Ma Maison</td>
<td>Suppliers</td>
<td>Montréal</td>
</tr>
<tr>
<td>Jean Fresnière</td>
<td>Mère Paillarde</td>
<td>Customers</td>
<td>Montréal</td>
</tr>
<tr>
<td>Peter Franken</td>
<td>Frankenversand</td>
<td>Customers</td>
<td>München</td>
</tr>
<tr>
<td>Karin Josephs</td>
<td>Toms Spezialitäten</td>
<td>Customers</td>
<td>Münster</td>
</tr>
<tr>
<td>Janine Labrune</td>
<td>Du monde entier</td>
<td>Customers</td>
<td>Nantes</td>
</tr>
<tr>
<td>Carine Schmitt</td>
<td>France restauration</td>
<td>Customers</td>
<td>Nantes</td>
</tr>
<tr>
<td>Shelley Burke</td>
<td>New Orleans Cajun Delights</td>
<td>Suppliers</td>
<td>New Orleans</td>
</tr>
<tr>
<td>Mayumi Ohno</td>
<td>Mayumi's</td>
<td>Suppliers</td>
<td>Osaka</td>
</tr>
<tr>
<td>Pirkko Koskitalo</td>
<td>Wartian Herkku</td>
<td>Customers</td>
<td>Oulu</td>
</tr>
<tr>
<td>Antonio del Valle Saavedra</td>
<td>Cooperativa de Quesos 'Las Cabras'</td>
<td>Suppliers</td>
<td>Oviedo</td>
</tr>
<tr>
<td>Guylène Nodier</td>
<td>Aux joyeux ecclésiastiques</td>
<td>Suppliers</td>
<td>Paris</td>
</tr>
<tr>
<td>Marie Bertrand</td>
<td>Paris spécialités</td>
<td>Customers</td>
<td>Paris</td>
</tr>
<tr>
<td>Dominique Perrier</td>
<td>Spécialités du monde</td>
<td>Customers</td>
<td>Paris</td>
</tr>
<tr>
<td>Fran Wilson</td>
<td>Lonesome Pine Restaurant</td>
<td>Customers</td>
<td>Portland</td>
</tr>
<tr>
<td>Liz Nixon</td>
<td>The Big Cheese</td>
<td>Customers</td>
<td>Portland</td>
</tr>
<tr>
<td>Elio Rossi</td>
<td>Formaggi Fortini s.r.l.</td>
<td>Suppliers</td>
<td>Ravenna</td>
</tr>
<tr>
<td>Maurizio Moroni</td>
<td>Reggiani Caseifici</td>
<td>Customers</td>
<td>Reggio Emilia</td>
</tr>
<tr>
<td>Paul Henriot</td>
<td>Vins et alcools Chevalier</td>
<td>Customers</td>
<td>Reims</td>
</tr>
<tr>
<td>Paula Parente</td>
<td>Wellington Importadora</td>
<td>Customers</td>
<td>Resende</td>
</tr>
<tr>
<td>Mario Pontes</td>
<td>Hanari Carnes</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Bernardo Batista</td>
<td>Que Delícia</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Janete Limeira</td>
<td>Ricardo Adocicados</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Giovanni Giudici</td>
<td>Pasta Buttini s.r.l.</td>
<td>Suppliers</td>
<td>Salerno</td>
</tr>
<tr>
<td>Georg Pipps</td>
<td>Piccolo und mehr</td>
<td>Customers</td>
<td>Salzburg</td>
</tr>
<tr>
<td>Carlos Hernández</td>
<td>HILARION-Abastos</td>
<td>Customers</td>
<td>San Cristóbal</td>
</tr>
<tr>
<td>Jaime Yorres</td>
<td>Let's Stop N Shop</td>
<td>Customers</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Beate Vileid</td>
<td>Norske Meierier</td>
<td>Suppliers</td>
<td>Sandvika</td>
</tr>
<tr>
<td>Pedro Afonso</td>
<td>Comércio Mineiro</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Aria Cruz</td>
<td>Familia Arquibaldo</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Lúcia Carvalho</td>
<td>Queen Cozinha</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Carlos Diaz</td>
<td>Refrescos Americanas LTDA</td>
<td>Suppliers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Anabela Domingues</td>
<td>Tradição Hipermercados</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Karl Jablonski</td>
<td>White Clover Markets</td>
<td>Customers</td>
<td>Seattle</td>
</tr>
<tr>
<td>José Pedro Freyre</td>
<td>Godos Cocina Típica</td>
<td>Customers</td>
<td>Sevilla</td>
</tr>
<tr>
<td>Chandra Leka</td>
<td>Leka Trading</td>
<td>Suppliers</td>
<td>Singapore</td>
</tr>
<tr>
<td>Jonas Bergulfsen</td>
<td>Santé Gourmet</td>
<td>Customers</td>
<td>Stavern</td>
</tr>
<tr>
<td>Chantal Goulet</td>
<td>Forêts d'érables</td>
<td>Suppliers</td>
<td>Ste-Hyacinthe</td>
</tr>
<tr>
<td>Michael Björn</td>
<td>Svensk Sjöföda AB</td>
<td>Suppliers</td>
<td>Stockholm</td>
</tr>
<tr>
<td>Frédérique Citeaux</td>
<td>Blondesddsl père et fils</td>
<td>Customers</td>
<td>Strasbourg</td>
</tr>
<tr>
<td>Rita Müller</td>
<td>Die Wandernde Kuh</td>
<td>Customers</td>
<td>Stuttgart</td>
</tr>
<tr>
<td>Wendy Mackenzie</td>
<td>G'day, Mate</td>
<td>Suppliers</td>
<td>Sydney</td>
</tr>
<tr>
<td>Yoshi Nagase</td>
<td>Tokyo Traders</td>
<td>Suppliers</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Paolo Accorti</td>
<td>Franchi S.p.A.</td>
<td>Customers</td>
<td>Torino</td>
</tr>
<tr>
<td>Annette Roulet</td>
<td>La maison d'Asie</td>
<td>Customers</td>
<td>Toulouse</td>
</tr>
<tr>
<td>Elizabeth Lincoln</td>
<td>Bottom-Dollar Markets</td>
<td>Customers</td>
<td>Tsawassen</td>
</tr>
<tr>
<td>Yoshi Tannamuri</td>
<td>Laughing Bacchus Wine Cellars</td>
<td>Customers</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Daniel Tonini</td>
<td>La corne d'abondance</td>
<td>Customers</td>
<td>Versailles</td>
</tr>
<tr>
<td>John Steel</td>
<td>Lazy K Kountry Store</td>
<td>Customers</td>
<td>Walla Walla</td>
</tr>
<tr>
<td>Zbyszek Piestrzeniewicz</td>
<td>Wolski Zajazd</td>
<td>Customers</td>
<td>Warszawa</td>
</tr>
<tr>
<td>Dirk Luchte</td>
<td>Zaanse Snoepfabriek</td>
<td>Suppliers</td>
<td>Zaandam</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#tblCustomer").DataTable();
});
</script>
</body>
</html>
Change the StyleSheet (design1.css) accordingly.
Design 1:
:root {
--theadColor: #6c7ae0;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
box-shadow: #bbbbbb 0px 0px 5px 0px;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: #fff;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: #ffffff;
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #f2f2f2 !important;
color: #000;
}
tbody tr:hover {
background-color: #f2f2f2 !important;
color: #000;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
Design 2:
:root {
--theadColor: #eb3461;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
box-shadow: #bbbbbb 0px 0px 5px 0px;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: #fff;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1 table.dataTable.display
tbody
tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: #ffffff;
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
background-color: #f2f2f2 !important;
color: #000;
}
tbody tr:hover {
background-color: #f2f2f2 !important;
color: #000;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
Design 3:
:root {
--theadColor: #cfcafa;
--theadTextColor: #000;
--darkColor:#09011a;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
border:1px solid #000;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: var(--theadTextColor) !important;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1 table.dataTable.display
tbody
tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: #ffffff;
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
background-color: var(--darkColor) !important;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#000 !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
Now these two sample design will be related to dark UI. One is using a Black and Dark Gray color combination while other is based on Red UI.
Design 4:
:root {
--theadColor: #000;
--theadTextColor: #fff;
--darkColor:#000;
--lightColor:#fff;
--darkRowColor: #1b1d1b;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
border:1px solid #000;
background-color: #000;
}
th,tr,td
{
border-color: #000 !important;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: var(--theadTextColor) !important;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: var(--darkRowColor);
color:var(--lightColor);
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
background-color: var(--darkColor) !important;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:var(--lightColor) !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: none !important;
color:var(--darkColor) !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
Design 5:
:root {
--theadColor: #38000e;
--theadTextColor: #fff;
--darkColor:#000;
--lightColor:#fff;
--darkRowColor: #e8003a;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
border:1px solid #000;
background-color: #000;
}
th,tr,td
{
border-color: #000 !important;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: var(--theadTextColor) !important;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: var(--darkRowColor);
color:var(--lightColor);
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
background-color: var(--darkColor) !important;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:var(--lightColor) !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: none !important;
color:var(--darkColor) !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
