使用CSS刪除不需要的表格單元格邊框

我有一個特殊的令人沮喪的問題。對於簡單的標記：使用CSS刪除不需要的表格單元格邊框

<table> 
    <thead> 
     <tr><th>1</th><th>2</th><th>3</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>a</td><td>b></td><td>c</td></tr> 
     <tr class='odd'><td>x</td><td>y</td><td>z</td></tr> 
    </tbody> 
</table>

我應用不同的背景顏色值給THEAD，TR，和TR奇數元素。問題是，在大多數瀏覽器中，每個單元格都有一個不需要的邊界，而不是任何表格行的顏色。只有在Firefox 3.5中，表格在任何單元格中都沒有邊框。

我只想知道如何在其他主流瀏覽器中刪除這些邊框，以便您在表格中看到的唯一內容是交替的行顏色。

來源

2010-01-11 Bob

是什麼顏色的邊界？ – SLaks 2010-01-11 01:40:08

感謝大家建議添加border-collapse：摺疊到CSS。那樣做了。 – Bob 2010-01-11 01:47:15

169

你需要把它添加到您的CSS ：

table { border-collapse:collapse }

來源

2010-01-11 01:38:30

+10

請注意，這必須應用於_table_，而不是_td_'s。我犯了這個錯誤，花了半個多小時的時間試圖弄清楚爲什麼它不起作用。 – javawizard 2014-07-05 02:22:24

修改你的HTML這樣的：

<table border="0" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr><td>1</td><td>2</td><td>3</td></tr> 
    </thead> 
    <tbody> 
     <tr><td>a</td><td>b></td><td>c</td></tr> 
     <tr class='odd'><td>x</td><td>y</td><td>z</td></tr> 
    </tbody> 
</table>

（我加border="0" cellpadding="0" cellspacing="0"）

在CSS中，你可以做到以下幾點：

table { 
    border-collapse: collapse; 
}

來源

2010-01-11 01:38:20

CSS是首選的方式。 – 2010-01-11 01:39:34

修改我的答案以包含css – 2010-01-11 01:41:44

嘗試將border: 0px; border-collapse: collapse;的樣式分配給表格元素。

來源

2010-01-11 01:38:30

@Josh不是'border：none'嗎？ – 2010-01-11 01:40:28

@DougNeiner舊帖子，但沒有和0都是同樣有效的。我喜歡0，因爲我必須輸入更少的:) – 2015-03-09 15:48:58

將該表的cellspacing屬性設置爲0。

您也可以使用CSS風格border-spacing: 0，但前提是您不需要支持舊版本的IE。

來源

2010-01-11 01:38:40 SLaks

添加一些CSS：

td, th { 
    border:none; 
}

來源

2010-01-11 01:38:57

對我來說不適用於chrome 60.0.3112.113（當應用於表 – 2017-09-14 09:17:51

您可能還需要添加

table td { border:0; }

以上，相當於= 「0」

它擺脫了填充的自動設置的cellpadding通過瀏覽器添加到單元格中，這可能取決於文檔類型和/或用於重置默認瀏覽器樣式的任何CSS

來源

2012-03-12 23:11:24 falc0n

時）Cellpadding是表格內容與其邊界'td {padding：X}'之間的空格。 Cellspacing是每個單元格之間的空間（單元格邊界之間的「邊距」）。你可以設置'border-collapse'來模擬'cellspacing'屬性在table標籤上做些什麼，但這不是萬無一失的。 – MetalFrog 2012-03-13 19:17:58

在嘗試了上述建議之後，唯一對我有用的是在子主題style.css的以下部分中將邊框屬性更改爲「0」（執行「查找」操作以找到每一個 - 以下是隻是網頁摘要）：

.comment-content table { 
    border-bottom: 1px solid #ddd; 

.comment-content td { 
    border-top: 1px solid #ddd; 
    padding: 6px 10px 6px 0; 
}

因此看起來像這樣算賬：

.comment-content table { 
    border-bottom: 0; 

.comment-content td { 
    border-top: 0; 
    padding: 6px 10px 6px 0; 
}

來源

2012-06-27 00:21:13

-2

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

如果你願意，你可以以類似的東西

$style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"'; 

<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>

來源

2014-02-15 13:08:34 Admax

我不明白這個答案中的$ style是什麼。您是否使用某種服務器端處理語言來設置樣式屬性？ – 2015-03-09 15:50:16

Boo內聯樣式。 – mopsyd 2015-03-26 18:43:57

-1

有時甚至在清除border之後。

原因是你在td裏面有圖像，給圖像display:block解決了它。

來源

2014-07-23 13:23:47 bresleveloper

刪除邊框，中庸之道使用CSS這樣的：

td { 
border-style : hidden!important; 
}

來源

2017-04-02 11:59:36

使用CSS刪除不需要的表格單元格邊框

回答

相關問題