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;
}
Was it helpful?

Solution

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

OTHER TIPS

try append this line in CSS stylesheet:

.datatable{ border: 0 !important; }

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top