7

我尝试删除 Table1Header 和 Table2Header 之间的空白。我尝试了边框：0px，填充：0px 和边框间距：0px；样式。Firefox 和 Opera 告诉我，我的边框间距样式被用户代理样式（即 2px）覆盖。如何强制浏览器使用我的样式？

http://jsfiddle.net/cdjDR/2/

<table class="tableGroup">
    <tbody>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table1Header</label></span>

                            </td>
                        </tr>
                        <tr class=" tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text">Table1Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>2</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table>
                    <tbody>
                        <tr class="tableHeader">
                            <td><span class="tableHeader"><label>Table2Header</label></span>

                            </td>
                        </tr>
                        <tr class="tableData">
                            <td>
                                <div class="ui-datatable">
                                    <div>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div><span><span class="ui-header-text" >Table2Col1</span></span>
                                                        </div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><span>12345</span>

                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

span.tableHeader > label {
    display: inline-block;
    float:left;
    line-height:30px;
    padding-left:10px;
    color: #202020;
    font-size: 13px;
}
tr.tableHeader {
    background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
    color: #808080;
    font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
    padding: 0px;
    border: 0px;
}
4

4 回答 4

16

您可以简单地使用border-collapse: collapse;甚至border-spacing: 0;可以

table { /* Will apply to all tables */
    border-spacing: 0;
    /* OR border-collapse: collapse; */
}

演示

您可以使用简单的元素选择器轻松覆盖用户代理样式表。

如果你想规范化样式，你应该使用CSS Reset

来到你的选择器，这对我来说似乎很脏，因为你的目标是桌子class .tableGroup和table嵌套在桌子下面

table.tableGroup, table.tableGroup > tr > td > table {
    border-spacing: 0px;
}

所以你最好使用

table.tableGroup, 
table.tableGroup table {
   border-spacing: 0;
}
于 2014-01-14T08:20:03.563 回答
4

您需要在每个表格标签中添加 (border="0" cellpadding="0" cellspacing="0") 表格致敬

例子 

<table border="0" cellpadding="0" cellspacing="0">

*您的课程示例*

<table border="0" cellpadding="0" cellspacing="0"  class="tableGroup">
于 2014-01-14T09:21:29.240 回答
3

尝试这个

table {
    border-spacing:0px; 
}

通过使用 css 工作

于 2014-01-14T08:25:06.913 回答
1

浏览器不会告诉您您的border-spacing样式已被用户代理样式表覆盖。相反，它们可能表明它没有发生继承。这仅仅是因为某些样式表在元素上设置了属性。

您的规则未应用于内部table元素的原因是它与您的任何选择器都不匹配。选择器

table.tableGroup > tr > td > table

不匹配它，因为一个tr元素永远不会是table即使可能出现的子元素。通过 HTML 语法，有一个中间tbody元素，即使它的开始和结束标记丢失。以下选择器将匹配：

table.tableGroup > tbody > tr > td > table

当然，table如果您希望所有table元素都按照规则设置样式，那么单纯的选择器也可以完成这项工作。

于 2014-01-14T08:27:57.833 回答