如何使表格邊框隱藏與CSS

我知道這是一個常見問題，但我已經嘗試了一些解決方案（如How to make separating lines/borders in a table disappear with CSS?），但我仍然無法完全理解。如何使表格邊框隱藏與CSS

我已經通過css定義了交替行顏色的表結構。我希望特殊的單元格之間的邊界（特別是垂直）不可見，因此假設我要麼需要零邊界寬度，要麼交替邊界的顏色與背景顏色相同。

以下示例是我嘗試過的，在從html中調用table1 id時，我得到了一個漂亮的交替彩色行表，但仍有明顯的單元格邊界 - 感謝您的幫助。

#table1 table, tr, td, th { 
    border: 0; 
} 

#table1 tbody tr:nth-child(odd) { 
    background-color: #A3B9D2; 
} 

#table1 tbody tr:nth-child(even) { 
    background-color: #E7EDF3; 
}

然後樣本html;

<table id="table1" > 
    <tr> 
    <td>Test</td><td>(value)</td> 
    </tr> 
    <tr> 
    <td>Test2</td><td>(value2)</td> 
    </tr> 
</table>

來源

2012-02-08 vinomarky

我敢肯定你是對的 - 什麼是正確的做法，然後定義列元素之間的零層邊框厚度的？我嘗試過table，tr，td，th {border：0;} 沒有＃table1，它也沒有工作。我也試過把邊界：0;在每個交替的顏色部分沒有運氣。沒有加速CSS，我希望有人會憐惜我;-) ; – vinomarky 2012-02-08 05:25:26

這有可能正是你所描述的是CELLSPACING。如果是這種情況，請在您的HTML中嘗試以下代碼：

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

Cellspacing指的是單元格之間的空間;這完全不是一個邊界。因此，如果您看到tds之間有無形或無色的空間，請嘗試在您的表格標記中添加cellspacing =「0」屬性。

來源

2012-02-08 05:28:14

完美 - 感謝一羣特雷西。感謝所有提供了很好的建議並幫助這個可憐的CSS neanderthal的人;-) – vinomarky 2012-02-08 05:42:07

Yay。那是我第一次接受Stack的答案:)謝謝！ – 2012-02-08 05:44:12

看來你是表1中應用樣式到表。第一個聲明實際上應該是：

＃table1 { border：0; }

或

表＃table1的{ 邊界：0; }

來源

2012-02-08 05:24:32 Christophe

#table1 table, tr, td, th {}是錯誤的。

你應該這樣做：

#table1, 
#table1 tr, 
#table1 td { border: 0; }

來源

2012-02-08 05:26:14 elclanrs

謝謝 - 嘗試它沒有運氣，邊框仍然存在（如在缺少顏色條而不是純色邊框） – vinomarky 2012-02-08 05:37:08

嘗試使用其他人發佈的cellpadding解決方案。 – elclanrs 2012-02-08 05:38:00

您也可以使用這種風格：

#table1 {border:0px solid transparent;}

來源

2012-02-08 05:26:47 TheGeekYouNeed

試試這個

#table1 { 
    border-collapse: collapse; 
}

來源

2012-02-08 05:31:08 NewUser

您使用的是什麼瀏覽器？爲了完全向後兼容，您仍然需要在表格中設置cellspacing="0"屬性。

http://jsfiddle.net/RmhxH/

來源

2012-02-08 05:36:32

使用cellspacing="0"確實是一個安全可靠的方式來擺脫那些煩人的線。但是，我個人從來都不喜歡它 - 因爲我必須將其應用於我在整個網站創建的每張桌子上，而不是放在一個整潔，集中的地方。

所以，我通常會在CSS文件中尋找類似elclanrs的解決方案。關於這個解決方案的很酷的事情是，你可以刪除它前面的一些標籤來爲這些應用線條/邊框。

所以，換句話說，把邊框圍着一張桌子 - 不必太行之間瓜分細胞的 - 你可以這樣做：

tr, td, th 
{ 
    border: 0; 
}

祝你好運！

來源

2012-08-02 15:59:17

試試這個：

table,td,tr,th{ 
    border:0; 
}

來源

2017-07-07 10:55:53

如何使表格邊框隱藏與CSS

回答

相關問題