Question

I am currently writing an addon module for our Billing Software, and the modules automatically inherit the template’s CSS when you use any of the elements. For example, I use the “datatable” element for my tables, and it inherits the CSS style depending upon what template the user is currently using.

I want to hide the inner border that the “datatable” element has, and I am using tags to put all of my CSS in the module code. I am not quite sure how I can do this, but here is what the CSS looks like from the billing software’s template style.css file.

table.form {
    border: 1px solid #B8CBE7;
    background-color: #fff;
    padding: 0px;
}
table.form td.fieldlabel {
    text-align: right;
    font-weight: bold;
    padding: 5px;
    background-color: #E4ECF8;
}
table.form td.fieldarea {
    text-align: left;
    padding: 5px;
    border-bottom: 1px dashed #ccc;
}
.tablebg {
    background-color: #e9e9e9;
}
table.datatable {
    padding: 0;
    margin: 0;
}
table.datatable th {
    background-color: #f3f3f3;
    font-weight: bold;
    text-align: center;
}
table.datatable td {
    background-color: #fff;
    text-align: center;
}
table.datatable tr.rowhighlight td {
    background-color: #EFF2F9;
}
table.datatable tr:hover td {
    background-color: #EFF2F9;
}

Answer 1

You can define the same datatable class again and set it’s border as 0. You will just need to ensure this new css definition comes after the actual one

table.datatable { 
border: 0px;
}