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

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

CSS

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

小提琴

HTML：

<table cellspacing="0">

小提琴

這兩種方案都應該有效 但是使用border-colapse導致@Mooseman注釋cellspacing在html5中已經過時了。

Answer 3

添加border-right: 0px; to和remove border-collapse: separate td border-collapse: separate 。 添加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

刪除td上的border-collapse並將其添加到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%;
}