Title: Make 2 different css tables
Last modified: August 24, 2016

---

# Make 2 different css tables

 *  Resolved [antoineO](https://wordpress.org/support/users/antoineo/)
 * (@antoineo)
 * [11 years ago](https://wordpress.org/support/topic/make-2-different-css-tables/)
 * Hello,
 * I would like to do 2 different table with different css, but I do not understand
   why it does not work.
 * Thanks for your help !
 * My code :
 *     ```
       table {
           width: 100%;
           border-collapse: separate;
           border-spacing: 8px 0px !important;
           table-layout: fixed;
       }
   
       /* Zebra striping */
       tr:nth-of-type(odd) {
         background: #eee;
       }
   
       th { /* column 1 - desktop view */
           background: #444444;
           color: white;
           font-weight: bold;
           text-align: left;
           white-space:normal;
           font-weight: normal;
           padding: 12px;
           font-style: normal !important;
           border-bottom: 0;
           position: relative;
       }
   
       td, th { /* column 1 - desktop view */
         padding: 6px;
         text-align: left;
       }
   
       td:after {
         height: 1px;
         background: #fff;
         content: '';
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
       }
   
       th:after {
         height: 1px;
         background: #fff;
         content: '';
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
       }
   
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px)  {
   
       table, thead, tbody, th, td, tr { /* Force table to not be like tables anymore */
           display: block;
       }
   
       thead tr { /* cacher les éléments entre ces balises en mobile view */
           position: absolute;
           top: -9999px;
           left: -9999px;
       }
   
       td:before { /* mobile view > contenu de la colonne 1 */
           position: absolute;
           left: 6px;
           width: 50%;
           padding-right: 10px;
           white-space: normal;
           text-align: left;
           color: #444444;
       }
   
       td { /* mobile view > contenu de la colonne 2 */
           border: none !important;
           border-bottom: 1px solid #ffffff !important;
           position: relative;
           padding-left: 60% !important;
           background-color: #f6f6f6;
           text-align: center !important;
       }
   
       /* Label the data */
           td:nth-of-type(1):before { content: "Site Vitrine"; }
           td:nth-of-type(2):before { content: "Site Catalogue"; }
           td:nth-of-type(3):before { content: "Site Ecommerce"; }
   
       }
   
       .border-top-rounded { /* en-tête du tableau > style class */
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;
           text-align: center;
       }
   
       td { /* desktop view > contenu de la ligne */
           text-align: center;
           white-space: normal;
           padding: 12px;
           border-left: 2px solid;
           border-right: 2px solid;
           border-bottom: 0;
           position: relative;
           background-color: #f6f6f6
       }
   
       @media (min-width: 768px){
       table tr th:first-child {
         width: 40%;
         white-space: normal;
       }
       table tr td {
         white-space: normal;
       }
       }
       @media (max-width: 767px){
       td {
           min-height: 40px;
       }
       }
   
       table tr:first-child th:after {
         height: 0;
       }
       ```
   
 * My attempt with class=”table.comparatif”
 *     ```
       table.comparatif {
           width: 100%;
           border-collapse: separate;
           border-spacing: 8px 0px !important;
           table-layout: fixed;
       }
   
       /* Zebra striping */
       table.comparatif tr:nth-of-type(odd) {
         background: #eee;
       }
   
       table.comparatif th { /* column 1 - desktop view */
           background: #444444;
           color: white;
           font-weight: bold;
           text-align: left;
           white-space:normal;
           font-weight: normal;
           padding: 12px;
           font-style: normal !important;
           border-bottom: 0;
           position: relative;
       }
   
       table.comparatif td, th { /* column 1 - desktop view */
         padding: 6px;
         text-align: left;
       }
   
       table.comparatif td:after {
         height: 1px;
         background: #fff;
         content: '';
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
       }
   
       table.comparatif th:after {
         height: 1px;
         background: #fff;
         content: '';
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
       }
   
       @media
       only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px)  {
   
       table.comparatif table, thead, tbody, th, td, tr { /* Force table to not be like tables anymore */
           display: block;
       }
   
       table.comparatif thead tr { /* cacher les éléments entre ces balises en mobile view */
           position: absolute;
           top: -9999px;
           left: -9999px;
       }
   
       table.comparatif td:before { /* mobile view > contenu de la colonne 1 */
           position: absolute;
           left: 6px;
           width: 50%;
           padding-right: 10px;
           white-space: normal;
           text-align: left;
           color: #444444;
       }
   
       table.comparatif td { /* mobile view > contenu de la colonne 2 */
           border: none !important;
           border-bottom: 1px solid #ffffff !important;
           position: relative;
           padding-left: 60% !important;
           background-color: #f6f6f6;
           text-align: center !important;
       }
   
       /* Label the data */
           td:nth-of-type(1):before { content: "Site Vitrine"; }
           td:nth-of-type(2):before { content: "Site Catalogue"; }
           td:nth-of-type(3):before { content: "Site Ecommerce"; }
   
       }
   
       table.comparatif .border-top-rounded { /* en-tête du tableau > style class */
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;
           text-align: center;
       }
   
       table.comparatif td { /* desktop view > contenu de la ligne */
           text-align: center;
           white-space: normal;
           padding: 12px;
           border-left: 2px solid;
           border-right: 2px solid;
           border-bottom: 0;
           position: relative;
           background-color: #f6f6f6
       }
   
       @media (min-width: 768px){
       table.comparatif tr th:first-child {
         width: 40%;
         white-space: normal;
       }
       table.comparatif tr td {
         white-space: normal;
       }
       }
       @media (max-width: 767px){
       table.comparatif td {
           min-height: 40px;
       }
       }
   
       table.comparatif tr:first-child th:after {
         height: 0;
       }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [11 years ago](https://wordpress.org/support/topic/make-2-different-css-tables/#post-6171219)
 * What is the link?
 * Kadence Themes
 *  Thread Starter [antoineO](https://wordpress.org/support/users/antoineo/)
 * (@antoineo)
 * [11 years ago](https://wordpress.org/support/topic/make-2-different-css-tables/#post-6171241)
 * Thank for your help/
 * Here with the 1st code : [http://lapousse.fr/comparatif-offres-site-internet](http://lapousse.fr/comparatif-offres-site-internet)
 * Here with the 2nd code : [http://lapousse.fr/test](http://lapousse.fr/test)
 *  Thread Starter [antoineO](https://wordpress.org/support/users/antoineo/)
 * (@antoineo)
 * [11 years ago](https://wordpress.org/support/topic/make-2-different-css-tables/#post-6171268)
 * Sorry, I have resolved my problem. I had to put “.table.comparatif” everywhere
   and not just “table.comparatif”
 * Sorry to the spam

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Make 2 different css tables’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/pinnacle/1.8.10/screenshot.png)
 * Pinnacle
 * [Support Threads](https://wordpress.org/support/theme/pinnacle/)
 * [Active Topics](https://wordpress.org/support/theme/pinnacle/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/pinnacle/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/pinnacle/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [antoineO](https://wordpress.org/support/users/antoineo/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/make-2-different-css-tables/#post-6171268)
 * Status: resolved