Question

我有以下标记

      <div class="dc2-search-form">
                <table width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <div class="search-form-label">
                                    <span id="StreetAddress_Label">Address</span>
                                </div><br>
                                <input style="height: 10px; width:80px" tabindex="0"
                                type="text" value="">
                            </td>
                            <td>
                                <div class="search-form-label">
                                    <span id="Sales_Cycle_Label">Sales
                                    Cycle</span>
                                </div><br>
                                <input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
                            </td>
                        </tr>
                    </tbody>
                </table>

关注CSS

.dc2-search-form {
 overflow-x: scroll;
 }
.dc2-search-form  table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}

以下是jsfiddle供参考

除了表格单元格之间的微小空间外，它为我提供了所需的输出。我需要将 span div 显示为无缝的一行，顶部和底部都有边框，但我可以通过空间来实现这一点。

如何删除它们之间的空间。

Answer 1

不对表格单元格应用填充：

.dc2-search-form  table td{padding:0}

JSFiddle

Answer 2

将cellspacing=0 cellpadding=0添加到您的table

update fiddle

<table width="100%" cellspacing=0 cellpadding=0>

Answer 3

尝试将cellpadding和cellspacing设置为0，如下所示：

<table cellpadding='0' cellspacing='0'>
    ...stuff...
</table>

删除表格单元格之间的空格

3 个答案: