CSS table style calling class

Question

I have some tables on my site.

The code in the style.css has default settings reads:

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin-bottom: 24px;
    width: 100%;
}

I have assigned a class to my table which I don't want to use these settings:

and tried to then implement :

table.checkmarkarray {
border-width: 0 0 0 0;
}

but it does not override the other value of border-width: 1px 0 0 1px;

how can I override this value? without changing the default value?

Answer 1

If you want to remove all borders from your table, you need to change the td properties on top of your table properties.

table.checkmarkarray, table.checkmarkarray td {
    border: none;
}

See it in action

Answer 2

You can try just add in border: none;

Answer 3

Add below the default values in style.css:

table, tr, th, td {
    border: none;
}

Answer 4

You can try to use !important property here:

table.checkmarkarray {
    border-width: 0 0 0 0 !important;
}

or just:

table.checkmarkarray {
    border: none;
}