Question

这是我的HTML

<table >

                 <tr>
                     <td></td>

                     <td   style="width: 180px;text-align: right">2323</td>

                </tr>

                <tr>
                    <td><strong>Name</strong></td>
                    <td  style="width: 180px" >GGGG</td>

                </tr>

                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td><strong > Test</strong></td>

                </tr>
                <tr>

                    <td  style="border-bottom: 1px solid #000">&nbsp;   </td>
                </tr>


            </table>

这是小提琴link

您可以看到文本“测试”与行

之间存在差距

如何删除此空间？

我尝试使用style="border-spacing: 0;border-collapse: collapse"

Answer 1

<强>替换

<tr>
   <td><strong > Test</strong></td>
</tr>
<tr>
    <td style="border-bottom: 1px solid #000">&nbsp;   </td>
</tr>

<强>与

<tr>
   <td style="border-bottom: 1px solid #000;"><strong > Test</strong></td>
</tr>

Demo

Answer 2

从带边框
在td中设置边框包含“测试”

固定？ js fiddle.net/42jQF/2 /

Answer 3

把风格放在那条线上？

 <table cellspacing="0">

                 <tr>
                     <td></td>

                     <td style="width: 180px;text-align: right">2323</td>
                </tr>

                <tr>
                    <td><strong>Name</strong></td>
                    <td  style="width: 180px" >GGGG</td>
                </tr>

                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td style="border-bottom: 1px solid #000"><strong> Test</strong></td>

                </tr>

            </table>

Answer 4

或者你可以使用

<td  style="border-top: 1px solid #000">&nbsp;</td>

或

<td  style="border-bottom: 1px solid #000">Test</td>

您所指的“差距”实际上是具有底部边框的“测试”值下方的单元格。

Answer 5

差距是由包含不间断空格 的表的最后一行引起的，这使得内容与文本行一样高。因此删除 似乎可以解决当前的问题。

但是，如果可以在真实单元格上设置边框，则在虚拟单元格上设置边框是不合逻辑的。此外，表结构是异常的，因为行具有不同数量的单元。（HTML5验证器会发出有关此问题的警告，原因很多。）但是，修复此问题需要有关实际表的预期结构的信息（问题中的那个可能是一个强烈简化的版本）。

删除2行之间的空格

5 个答案: