Site icon ParallelCodes

Jquery Datatable Custom Design CSS

ASH

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&#39;s Homestead</td>

            <td>Suppliers</td>

            <td>Ann Arbor</td>

          </tr>

          <tr>

            <td>Eliane Noz</td>

            <td>Gai p&#226;turage</td>

            <td>Suppliers</td>

            <td>Annecy</td>

          </tr>

          <tr>

            <td>Palle Ibsen</td>

            <td>Vaffeljernet</td>

            <td>Customers</td>

            <td>&#197;rhus</td>

          </tr>

          <tr>

            <td>Eduardo Saavedra</td>

            <td>Galer&#237;a del gastr&#243;nomo</td>

            <td>Customers</td>

            <td>Barcelona</td>

          </tr>

          <tr>

            <td>Carlos Gonz&#225;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&#252;&#223;waren GmbH &amp; 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&#228; HB</td>

            <td>Customers</td>

            <td>Br&#228;cke</td>

          </tr>

          <tr>

            <td>Philip Cramer</td>

            <td>K&#246;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&#233;ano Atl&#225;ntico Ltda.</td>

            <td>Customers</td>

            <td>Buenos Aires</td>

          </tr>

          <tr>

            <td>Sergio Guti&#233;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&#233; 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&#234;mes d&#233;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&#223;m&#228;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&#232;ve</td>

          </tr>

          <tr>

            <td>Lars Peterson</td>

            <td>PB Kn&#228;ckebr&#246;d AB</td>

            <td>Suppliers</td>

            <td>G&#246;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&#39;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&#228;seladen</td>

            <td>Customers</td>

            <td>K&#246;ln</td>

          </tr>

          <tr>

            <td>Art Braunschweiger</td>

            <td>Split Rail Beer &amp; 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&#233;</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&#39;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&#246;p</td>

            <td>Customers</td>

            <td>Lule&#229;</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&#237;n Sommer</td>

            <td>B&#243;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&#39;</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&#233;xico D.F.</td>

          </tr>

          <tr>

            <td>Antonio Moreno</td>

            <td>Antonio Moreno Taquer&#237;a</td>

            <td>Customers</td>

            <td>M&#233;xico D.F.</td>

          </tr>

          <tr>

            <td>Francisco Chang</td>

            <td>Centro comercial Moctezuma</td>

            <td>Customers</td>

            <td>M&#233;xico D.F.</td>

          </tr>

          <tr>

            <td>Guillermo Fern&#225;ndez</td>

            <td>Pericles Comidas cl&#225;sicas</td>

            <td>Customers</td>

            <td>M&#233;xico D.F.</td>

          </tr>

          <tr>

            <td>Miguel Angel Paolino</td>

            <td>Tortuga Restaurante</td>

            <td>Customers</td>

            <td>M&#233;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&#233;al</td>

          </tr>

          <tr>

            <td>Jean Fresni&#232;re</td>

            <td>M&#232;re Paillarde</td>

            <td>Customers</td>

            <td>Montr&#233;al</td>

          </tr>

          <tr>

            <td>Peter Franken</td>

            <td>Frankenversand</td>

            <td>Customers</td>

            <td>M&#252;nchen</td>

          </tr>

          <tr>

            <td>Karin Josephs</td>

            <td>Toms Spezialit&#228;ten</td>

            <td>Customers</td>

            <td>M&#252;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&#39;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 &#39;Las Cabras&#39;</td>

            <td>Suppliers</td>

            <td>Oviedo</td>

          </tr>

          <tr>

            <td>Guyl&#232;ne Nodier</td>

            <td>Aux joyeux eccl&#233;siastiques</td>

            <td>Suppliers</td>

            <td>Paris</td>

          </tr>

          <tr>

            <td>Marie Bertrand</td>

            <td>Paris sp&#233;cialit&#233;s</td>

            <td>Customers</td>

            <td>Paris</td>

          </tr>

          <tr>

            <td>Dominique Perrier</td>

            <td>Sp&#233;cialit&#233;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&#237;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&#225;ndez</td>

            <td>HILARION-Abastos</td>

            <td>Customers</td>

            <td>San Crist&#243;bal</td>

          </tr>

          <tr>

            <td>Jaime Yorres</td>

            <td>Let&#39;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&#233;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&#250;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&#231;&#227;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&#233; Pedro Freyre</td>

            <td>Godos Cocina T&#237;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&#233; Gourmet</td>

            <td>Customers</td>

            <td>Stavern</td>

          </tr>

          <tr>

            <td>Chantal Goulet</td>

            <td>For&#234;ts d&#39;&#233;rables</td>

            <td>Suppliers</td>

            <td>Ste-Hyacinthe</td>

          </tr>

          <tr>

            <td>Michael Bj&#246;rn</td>

            <td>Svensk Sj&#246;f&#246;da AB</td>

            <td>Suppliers</td>

            <td>Stockholm</td>

          </tr>

          <tr>

            <td>Fr&#233;d&#233;rique Citeaux</td>

            <td>Blondesddsl p&#232;re et fils</td>

            <td>Customers</td>

            <td>Strasbourg</td>

          </tr>

          <tr>

            <td>Rita M&#252;ller</td>

            <td>Die Wandernde Kuh</td>

            <td>Customers</td>

            <td>Stuttgart</td>

          </tr>

          <tr>

            <td>Wendy Mackenzie</td>

            <td>G&#39;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&#39;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&#39;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;

}






DEMO DOWNLOAD




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;

}










DEMO DOWNLOAD






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;

}








DEMO DOWNLOAD




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;

}








DEMO DOWNLOAD




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;

  }








DEMO DOWNLOAD


 


DOWNLOAD ALL SAMPLES

















    

    
                        
                
        

	


	






		

			
				Exit mobile version