如何從HTML表中完全刪除邊框

我的目標是製作一個類似於「相框」的HTML頁面。換句話說，我想製作一張被4張圖片包圍的空白頁。如何從HTML表中完全刪除邊框

這是我的代碼：

<table> 
    <tr> 
     <td class="bTop" colspan="3"> 
     </td> 
    </tr> 
    <tr> 
     <td class="bLeft"> 
     </td> 
     <td class="middle"> 
     </td> 
     <td class="bRight"> 
     </td> 
    </tr> 
    <tr> 
     <td class="bBottom" colspan="3"> 
     </td> 
    </tr>              
</table>

而CSS類如下：

.bTop 
{ 
    width: 960px; 
    height: 111px; 
    background-image: url('../Images/BackTop.jpg'); 
} 
.bLeft 
{ 
    width: 212px; 
    height: 280px; 
    background-image: url('../Images/BackLeft.jpg');  

} 

.middle 
{ 
    width: 536px; 
    height: 280px; 
} 

.bRight 
{ 
    width: 212px; 
    height: 280px; 
    background-image: url('../Images/BackRight.jpg');  
} 

.bBottom 
{   
    width: 960px; 
    height: 111px; 
    background-image: url('../Images/BackBottom.jpg');  
}

我的問題是，我收到表的單元格之間的細白線，我的意思是圖片的邊界不連續。我怎樣才能避免這些空白？

來源

2011-04-16 yazanpro

126

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

而且在CSS：

table {border: none;}

編輯： 作爲伊格爾指出，該解決方案已正式棄用（仍然工作雖然），所以如果你是從頭開始，你應該去jnpcl的border-collapse解決方案。

我其實很不喜歡這種變化（不適用於經常使用的表格）。它使一些任務有點複雜。例如。當你想在同一個地方（視覺上）包含兩個不同的邊框時，其中一個是一行的TOP，另一個是其他行的BOTTOM。他們會崩潰（=只顯示其中一個）。那麼你必須研究邊界的「優先級」是如何計算的，邊界樣式是「更強」（雙重還是實體等）。

我不喜歡這樣的：現在

<table cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="first">first row</td> 
    </tr> 
    <tr> 
    <td class="second">second row</td> 
    </tr> 
</table> 

---------- 

.first {border-bottom:1px solid #EEE;} 
.second {border-top:1px solid #CCC;}

，邊境崩潰，這不會因爲總是刪除了一個邊界的工作。我必須以其他方式來做（有更多的解決方案）。一種可能性是使用與CSS3的box-shadow：

<table class="tab"> 
    <tr> 
    <td class="first">first row</td> 
    </tr> 
    <tr> 
    <td class="second">second row</td> 
    </tr> 
</table> 

<style> 
.tab {border-collapse:collapse;} 
.tab .first {border-bottom:1px solid #EEE;} 
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;} 
</style>

您也可以使用類似「槽|脊|插圖|開始」邊框樣式，只是一個單一的邊界。但對我而言，這並不是最佳選擇，因爲我無法控制這兩種顏色。

也許對於摺疊邊界有一些簡單而好的解決方案，但我還沒有看到它，而且我也沒有花太多時間在它上面。也許有人在這裏將能夠向我/我們;）

來源

2011-04-16 02:43:28 Damb

CELLSPACING＆CELLPADDING已被棄用，看到https://developer.mozilla.org/en-US/docs/HTML/Element/table - 你應該使用@jnpcl解決方案。 – iGEL 2012-09-06 08:50:10

iGEL是對的，我編輯了我的答案。老實說，我很驚訝，它已經被棄用了很長一段時間，我仍然在使用它，沒有任何問題:) – Damb 2012-11-25 21:32:53

table { 
    border-collapse: collapse; 
} 

/* remove padding */ 
td, th { 
    padding: 0; 
}

來源

2011-04-16 03:16:29 drudge

爲什麼要刪除填充？對我而言，它也可以不刪除它。 – LinusGeffarth 2017-11-28 13:55:00

@LinusGeffarth當時有必要，但那是六年前。 :) – drudge 2017-12-04 06:45:27

對我來說，我需要做這樣的事情來完全刪除表和所有單元格的邊界。這根本不需要修改HTML，這對我來說很有幫助。

table, tr, td { 
    border: none; 
}

來源

2016-05-06 15:17:31

在引導環境沒有頂答案的幫助，但應用下面的刪除了所有邊界：

.noBorder { 
    border:none !important; 
}

應用爲：

<td class="noBorder">

來源

2016-07-20 08:03:37 Stephan

我認爲你的意思是'border：none！important'（注意我刪除了！和重要之間的空格） – 2016-10-27 07:38:01

這個建議在Wordpress中適用於我。我無法執行邊界任務。 – robbpriestley 2016-12-13 16:42:23

這是解決問題的me：

在您的HTML tr標記中，添加以下內容：

style="border-collapse: collapse; border: none;"

刪除了表格行中顯示的所有邊框。

來源

2017-02-08 09:07:30 Khozanai

在這裏引導環境是我的解決方案：自1999年以來

<table style="border-collapse: collapse; border: none;"> 
     <tr style="border: none;"> 
      <td style="border: none;"> 
      </td> 
     </tr> 
    </table>

來源

2017-08-24 08:38:21 Han

如何從HTML表中完全刪除邊框

回答

相關問題