覆盖CSS属性。 ！重要不起作用

Question

我必须更新内部使用的旧页面，它具有以下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;
}

我添加了这张表：

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

这个CSS：

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

但桌子仍有边框。除了为之前的“table”CSS属性创建类之外，还有其他解决方法吗？也许是 CSS表？

我只想对齐表单元素

jsFiddle

Answer 1

这只是禁用表本身的边框而不是子节点的边框。请改用这样的东西：

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

如果您使用此功能，则可以删除!important

Answer 2

table没有边框，但所有td都有。如果您不想在列周围添加边框，请从CSS中删除定义（或覆盖它们）。

Answer 3

从border和td。

中删除table

jsFiddle example

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

不需要!important，只需将此样式放在初始声明下方，以确保它覆盖初始样式。

Answer 4

你应该如下所示。添加table td非常重要。 td有边框。

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

此外，您不再需要!important，所以这也可以。

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

更新了jsfiddle：http://jsfiddle.net/Lsk53/2/