table 邊框問題

2022-06-11 21:42:17 字數 3393 閱讀 9709

對table設定css樣式邊框,分為幾種情況:

1、只對table設定邊框

2、對td設定邊框

3、對table和td技巧性設定**邊框

4、對table和td設定背景,實現完美**邊框

以下divcss5對以上幾種實現html **邊框樣式進行講解與案例演示。為了便於觀察,divcss5均設定所有案例**為1px實線紅色邊框為例;table寬度為400px;**為三列三行,對以上四種情況**外層加個div盒子,分別css命名為「.table-a」、「.table-b」、「.table-c」、「.table-d」。

只對table標籤設定border(邊框)樣式,將讓此**最外層table乙個邊框,而**內部不產生邊框樣式。

案例詳細如下:

1、對應css**

.table-a table 

/* css注釋:只對table標籤設定紅色邊框樣式 */ 

style> 

2、對應html**片段

站名td> 

**td> 

說明td> 

tr> 

divcss5td> 

www.divcss5.comtd> 

css學習td> 

tr> 

css5td> 

www.css5.com.cntd> 

css切圖td> 

tr> 

table> 

div> 

3、案例截圖

css對table設定邊框案例截圖-僅對table標籤設定邊框

檢視案例

對table**td設定邊框樣式,**物件內td將實現邊框樣式,但中間部分td會導致出現雙邊框。

詳細案例教程如下:

1、對應css**

.table-b table td 

/* css注釋:只對table td標籤設定紅色邊框樣式 */ 

style> 

2、對應html源**片段

站名td> 

**td> 

說明td> 

tr> 

divcss5td> 

www.divcss5.comtd> 

css學習td> 

tr> 

css5td> 

www.css5.com.cntd> 

css切圖td> 

tr> 

table> 

3、案例截圖

對td設定邊框後,中間出現雙邊框樣式 案例截圖

檢視案例

如上第二點,只對**物件td設定單一邊框樣式,中間部分td與td標籤之間就會出現雙邊框現象。

解決方法:對td只設定兩個邊的邊框,對table也設定兩個邊的邊框樣式。

解釋:對td設定左與上邊框,這樣td與td相鄰就會只出現單一邊框樣式,這樣就會出現**右側和下部沒有邊框,這個時候我們設定table右和下 邊框解決顯示右側和下側td剩下未顯示邊框。

1、對應css**:

.table-c table 

.table-c table td 

/* css 注釋: 

只對table td設定左與上邊框; 

對table設定右與下邊框; 

為了便於截圖,我們將css 注釋說明換行排版 

*/ style> 

2、對應html源**片段:

站名td> 

**td> 

說明td> 

tr> 

divcss5td> 

www.divcss5.comtd> 

css學習td> 

tr> 

css5td> 

www.css5.com.cntd> 

css切圖td> 

tr> 

table> 

3、**邊框實現案例截圖

css完美實現html table**邊框樣式截圖

檢視案例

推薦此方法設定table**邊框樣式。

1、基礎設定

1)、先設定table css背景為紅色

2)、設定table單元之間間距為1

使用dw軟體輔助設定table**單元間距為1,具體dw軟體視覺化操作步驟簡要說明,首先(檢視模式)選中**後,對應dw軟體編輯視窗底部會「屬性」面板會出現對應table**屬性設定地方,我們將「間隔」填寫為「1」。這個時候我們會看到table**標籤裡cellspacing值為「1」(cellspacing="1")。

借助dw軟體設定**單元之間間距

或直接對標籤內cellspacing="1"即可,得到:

3)、設定table td背景為白色

2、css**:

.table-d table 

.table-d table td 

/* css注釋:設定table背景為紅色,td背景為白色 */ 

style> 

3、對應html源**:

站名td> 

**td> 

說明td> 

tr> 

divcss5td> 

www.divcss5.comtd> 

css學習td> 

tr> 

css5td> 

www.css5.com.cntd> 

css切圖td> 

tr> 

table> 

div> 

4、**邊框案例截圖

設定**背景顏色實現邊框樣式截圖

以上四種方式實現table**邊框樣式方法,推薦使用第三和第四種方法來解決**邊框樣式。希望divcss5整理總結html table邊框布局方法對大家有幫助並能掌握,平時需要時靈活運用。

table邊框設定

一 的常用屬性 基本屬性有 width 寬度 height 高度 border 邊框值 cellspacing 的內寬,即 與tr之間的間隔 cellpadding 內元素的間隔,即tr與tr之間的間隔 bordercolorlight 的亮邊框顏色 bordercolordark 的暗邊框顏色 b...

table邊框設定

一 的常用屬性 基本屬性有 width 寬度 height 高度 border 邊框值 cellspacing 的內寬,即 與tr之間的間隔 cellpadding 內元素的間隔,即tr與tr之間的間隔 bordercolorlight 的亮邊框顏色 bordercolordark 的暗邊框顏色 b...

Table邊框詳解

大家都知道在html中當border 1 cellpadding 0 cellspacing 0 的時候,樣式很醜,有點 立體 的感覺,當改變邊框顏色的時候,border看起來又會很粗,這是因為兩個邊重疊所造成的,那麼如何做出上面的效果呢?跟著我的操作來吧。樣式 title head body ta...