表格單元格之間的空格

您可以看看this Demo並讓我知道爲什麼表格中的單元格之間存在線條而沒有邊框設置？表格單元格之間的空格

<table style="width:300px"> 
    <tr> 
     <td>Jill</td> 
     <td>Smith</td> 
     <td>50</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>94</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td> 
     <td>94</td> 
    </tr> 
</table>

來源

2014-06-12 user3668817

默認情況下有一個「邊框設置」。這就是爲什麼你應該在'table'標籤中使用'cellspacing = 0'的原因。 –

可能dublicate - http：// stackoverflow。com/questions/21108708/how-to-remove-spaces-between-cells-in-a-html-table –

用途：

<table style="width:300px" cellspacing="0">

fiddle

來源

2014-06-12 18:56:32

請解釋downvote。 –

我不是那種投票的人，但通常認爲最好的做法是將與HTML相關的視圖相關的東西保存在CSS中，並將其存儲在CSS中，以便HTML僅充當分層容器。在你的情況下，'cellspacing =「0」'與視圖有關，可以改爲'border-spacing：0'。 –

您可以添加

table{ 
    border-collapse:collapse; 
}

要摺疊邊框

Fiddle

來源

2014-06-12 18:56:57 Smeegs

默認的瀏覽器樣式在表格單元格標籤上添加一個像素的填充。

爲了避免默認瀏覽器CSS，你可以使用一個CSS文件中像http://meyerweb.com/eric/tools/css/reset/

您也可以通過使用邊框間距或邊界崩潰財產上的表標記刪除表中的所有邊界。

table { 
    border-spacing: 0; 
}

或

table { 
    border-collapse: 0; 
}

來源

2014-06-12 18:59:22

默認填充是專門針對表格單元的，而不是通常的「標籤」。「CSS重置」充其量只是一個鈍器，在最壞的情況下也是一個混亂的來源。 –

該線由單元之間的間距而引起的。它是空的空間，這意味着通常桌子的背景（這裏是綠色）閃耀。這個間距通常被描述爲「邊界間距」，因爲它可以被看作邏輯邊界之間的間距。如果沒有設置邊界，就像這裏一樣，邊界仍然存在，儘管寬度爲零。對於兩個相鄰的單元，我們因此具有設置

... [單元1內容] [右填充] [右邊框] [邊框間距] [單元2的左邊界] [單元1的左邊界] [單元1內容]。 ..

所以雖然它看起來像一個邊框，但它確實是（不可見的）邊框之間的間距。

有幾種方法來刪除它：

使用HTML屬性cellspacing=0的table元素。所有通常渲染表的瀏覽器都支持這一點。名義上，該屬性在HTML 4中被棄用，在HTML5中不合格，但瀏覽器仍然需要支持。使用table { border-spacing: 0 }，這對應於HTML屬性。瀏覽器支持很好，但比其他方法更受限制。通過此方法，您可以爲行（例如，英寸）之間的邊框設置非零邊框間距。 table {border-spacing: 0 2px}。
使用table { border-collapse: collapse }，它具有非常好的瀏覽器支持。它會導致崩潰的邊界模型被使用，並帶來可能的副作用。它使相鄰單元的邊界（可能是虛擬的，零寬度的邊界）重合，所以它們之間不能有任何邊界間隔。

來源

2014-06-12 20:09:34

表格單元格之間的空格

回答

相關問題