如何删除HTML表中单元格之间的空格 [英] How to remove spaces between cells in a html table

问题描述

我尝试删除Table1Header和Table2Header之间的空格。我试过border：0px，padding：0px和border-spacing：0px;样式。 Firefox和Opera告诉我，我的边框间距样式被用户代理样式（2px）覆盖。如何强制浏览器使用我的styleshits？

I try to remove white space between Table1Header and Table2Header. I tried border:0px, padding:0px and border-spacing:0px; styles. Firefox and Opera tell me that my border-spacing style is overrided by the user agent style (which is 2px). How can I force browser to use my styleshits?

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

推荐答案

浏览器不告诉你您的 border-spacing 样式将被用户代理样式表覆盖。相反，他们可能会指示不会发生 继承。这是因为某些样式表设置了元素的属性。

The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.

您的规则不应用于内部表元素是它不匹配任何您的选择器。选择器

The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector

table.tableGroup > tr > td > table

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

does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:

table.tableGroup > tbody > tr > td > table

当然，一个表如果您希望所有 table 元素按照规则设置样式，那么您也可以执行此工作。

Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.

这篇关于如何删除HTML表中单元格之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！