Override CSS Style in PHP Page

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

Hanky Panky · Accepted Answer · 2012-08-04 09:22:45Z

2

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

answered Aug 4, 2012 at 9:22

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user470760 Over a year ago

I had already given that a try and it didn't work, so I just assumed I was wrong about that. The border styling for this table must be coming from something else. Is there any way to determine exactly what is styling it?

Hanky Panky Over a year ago

Yes you can inspect the object in FireFox using "Inspect Element with FireBug" it will show the class from where the css style was inherited

user470760 Over a year ago

I just realized the "borders" were actually the background div showing through due to cell spacing. I will go ahead and accept your answer as it was the first one and correct. Thanks!

Kode Plus · Accepted Answer · 2012-08-04 09:32:20Z

1

try append this line in CSS stylesheet:

.datatable{ border: 0 !important; }

answered Aug 4, 2012 at 9:32

Kode Plus

7061 gold badge8 silver badges10 bronze badges

1 Comment

Growling Flea Over a year ago

This method is important if you are working with a web application that has .css files in different areas or if you are wanting to override css from bootstrap or datatables. One specific but common use for this method is overriding a mouse over on a table row. specifically, I had rows that were changing based on data in the row. The color chosen from datatables was too close to the color chosen for the rows 'status'. I decided to use this method to override the mouse-over color to avoid confusion.

Collectives™ on Stack Overflow

Override CSS Style in PHP Page

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related