Overriding CSS property. !important doesn't work

Question

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

Answer 1

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