CODEWITHSUNDEEP
htmlcss
Cornwell
Cornwell

Reputation: 3410

Overriding CSS property. !important doesn't work

I have to update an old page used internally only, that has the following CSS:

table {
    font-family: "Arial";
    font-size: 13px;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid black;
    vertical-align: middle;
} 

table td {
    border: 1px solid black;
    padding-left: 5px;
}

table th {
    border: 1px solid black;
    padding:0 25px 0 25px;
}

I added this table:

<div id="tbl_secFilter">
<table>
    <tr>
        <td><label><input type="checkbox" name="chk_pd" value="true"> Past days</label></td>
        <td><input type="text" id="days"></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="chk_tf" value="true"> Timeframe</label></td>
        <td><input type="text" id="from" class="hasDatepicker">&nbsp;to&nbsp;<input type="text" id="to" class="hasDatepicker"></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" name="chk_un" value="true"> Username</label></td>
        <td><input type="text" id="username"></td>
    </tr>
</table>
</div>

And this CSS:

#tbl_secFilter table { border-style: none !important; }

But the table still has borders. Is there any workaround besides creating a class for the previous "table" CSS property? Maybe a CSS table?

I just wanted to align the form elements

jsFiddle

Upvotes: 2

Views: 2166

Answers (4)

Ali Gajani
Ali Gajani

Reputation: 15091

You should do it as shown below. It was important to add table td. tds have borders.

#tbl_secFilter table td { border: 0px solid black !important; }

Moreover, you don't need the !important anymore, so this works as well.

#tbl_secFilter table td { border: 0px solid black; }

Updated jsfiddle: http://jsfiddle.net/Lsk53/2/

enter image description here

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240968

Remove the border from the td and the table.

jsFiddle example

#tbl_secFilter table td, #tbl_secFilter table {
    border: none;
}

No need for !important, just place this styling below the initial declaration to ensure that it overwrites the initial styling.

Upvotes: 2

Alex
Alex

Reputation: 35409

The table doesn't have a border, but all of your tds do. If you don't want borders around your columns, then remove the definitions from the CSS (or override them).

Upvotes: 4

idmean
idmean

Reputation: 14875

That just disables the border of the table itself not of the children. Use something like this instead:

#tbl_secFilter table,
#tbl_secFilter table td,
#tbl_secFilter table th  {
    border-style: none !important;
}

If you use this you can remove !important

Upvotes: 4

Related Questions