html中的表间距

Question

出于任何原因，我在两个TD单元之间得到一个小间隙（线不接触）。 那边没有填充物或边缘......我做了这个崩溃的想法。

为什么会这样？ http://jsfiddle.net/CKy6U/

我的HTML：

<table>
    <tr>
        <td>
            TEST CELL 1
        </td>
         <td>
             TEST CELL 2
        </td>
    </tr>
</table>

我的CSS：

table
{
    width: 100%;
}
tr
{
    border-bottom: 1px solid Black;
}

td
{
    border-collapse: separate;
    border-spacing: 0px;
    border-left: 1px solid Black;
    border-bottom: 1px solid Black;
    padding: 3px;
    width: 50%;
}

我的结果：

Answer 1

为表格添加边框折叠。

table
{
width: 100%;
border-collapse:collapse;
}

DEMO

Answer 2

您必须在html表格的border-collapse: collapse或table中添加cellspacing="0"。

<强> CSS

table {
  width: 100%;
  border-collapse: collapse;
}

fiddle

HTML：

<table cellspacing="0">

fiddle

两种解决方案都应该有效。但是使用border-colapse因为@Mooseman评论cellspacing在html5中已经过时了。

Answer 3

从border-right: 0px;添加border-collapse: separate并删除td。将border-collapse: collapse添加到table。

小提琴：http://jsfiddle.net/CKy6U/7/

Answer 4

尝试这样：LINK

<强> CSS：

 table {
        width: 100%;
        border-collapse:collapse;
    }

Answer 5

使用normalize.css或css reset 我还要添加

<table cellspacing="0" cellpadding="0"> ... </table>

Answer 6

删除border-collapse上的td并将其添加到table

table{
    width: 100%;
    border-collapse: collapse;
}

tr{
    border-bottom: 1px solid black;
}

td{
    border-spacing: 0px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    padding: 3px;
    width: 50%;
}