CSS class overwrites other

Question

I have HTML tables where the following CSS is applied:

.tbst th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}

and

.cmstb th,
td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}

One table is using .tbst class, the other one .cmstb. But from some reason, the second CSS is applied to both tables, so the second CSS overwrite the style in first CSS. What am I doing wrong here?

Answer 1

you are styling the th correctly, but for td, the style is oerwritten, because it is not specific to any table. make it specific to those tables

.tbst th,
 .tbst td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 12px;
    overflow: hidden !important;
    line-height: 24px !important;
}
and

.cmstb th,
.cmstb td {
    padding: 12px 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid #ccc !important;
    font-size: 14px;
    overflow: hidden !important;
    line-height: 24px !important;
}