如何删除html表格中单元格之间的空格

发布时间：2020-12-14 16:41:01 所属栏目：资源来源：网络整理

导读：我尝试删除Table1Header和Table2Header之间的空格.我试过border：0px,padding：0px和border-spacing：0px;样式. Firefox和Opera告诉我,我的边框间距样式被用户代理样式(即2px)所覆盖.如何强制浏览器使用我的样式？ http://jsfiddle.net/cdjDR/2/ table class

我尝试删除Table1Header和Table2Header之间的空格.我试过border：0px,padding：0px和border-spacing：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;
}

解决方法

浏览器没有告诉您边框间距样式被用户代理样式表覆盖.相反,它们可能表明不会发生继承.这只是因为某些样式表在元素上设置了属性.

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

table.tableGroup > tr > td > table

与它不匹配,因为tr元素永远不是表的子元素,即使可能看起来像.通过HTML语法,即使缺少其开始和结束标记,也存在插入的tbody元素.以下选择器将匹配：

table.tableGroup > tbody > tr > td > table

当然,如果您希望规则对所有表元素进行样式设置,那么仅仅表选择器也可以完成这项工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!