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;
}