如何爲表格創建連續的邊界線？

enter image description here 如何爲表格創建連續的邊界線？

我使用html創建表。我想爲不同的表格行創建連續的行，而不需要連接第一行的行。使用表的border-collapse屬性可以幫助連接這些行，但是這也會加入到標題的行中，而在標題的單元之間不留空間。我可以做什麼來將線條與藍色圓圈連接而不影響最高的線條？ Here's the fiddle，html和css代碼。

<table id="table"> 
     <tr> 
      <td>ENTERPRISE</td> 
      <td>PRIMARY VARIABLES</td> 
      <td>SECONDARY VARIABLES</td> 
     </tr> 
     <tr> 
      <td>Labor Market</td> 
      <td>N/A</td> 
      <td>Both events had an excellent attendance from C-level executives, with the CFO Forum having its highest attendance rate so far.</td> 
     </tr> 
     <tr> 
      <td>Economic Diversification</td> 
      <td>recently hosted two of its flagship events in Hong Kong, the INED Forum and CBA Forum.</td> 
      <td>For further information on previous INED and CFO events, please click here to access the Pursuits Resource Centre.</td> 
     </tr> 
     <tr> 
      <td>Innovation and R&D</td> 
      <td>He has vast experience working with insurance audit clients, and will be working on two global accounts.</td> 
      <td>Sandy specialises in tax, and brings vast knowledge with her in terms of asset management and private equity</td> 
     </tr> 
    </table> 

#table tr:first-of-type td{ 
    font-size: 18pt; 
    color: rgb(0,37,122); 
    background-color: rgb(152,198,234); 
    text-align: center; 
    font-family: "Arial Bold"; 
    height: 18px; 
} 
#table tr:not(:first-of-type){ 
    font-family: "Arial Regular"; 
    font-size: 14pt; 
    color: rgb(51,51,51); 
} 
td{ 
    padding-top: 18px;/*2.3653%*/ 
    padding-bottom: 18px; 
    padding-right: 57px; /*3.5625%*/ 
    border-style:none none solid none; 
} 
tr td:last-of-type{ 
    padding-right: 0; 
}

來源

2015-06-29 Ken Kwok

我修改了小提琴代碼https://jsfiddle.net/csuczL3c/ –

它似乎線條仍然相同。你有更新嗎？不管怎樣，謝謝你。 –

#table { 
    border-spacing:0 
}

是你的答案

來源

2015-06-29 09:44:45

請將cellspacing添加到表標記。

<table id="table" cellspacing="0">

演示http://jsfiddle.net/yvyonxhw/1/

來源

2015-06-29 09:42:55 Mitul

我以前試過。我不希望第一行的單元格之間的間距變爲0，如圖所示 –

@KenKwok我已添加演示鏈接到ans我可以看到它的刪除可以請你給站點的URL，所以我會檢查 – Mitul

我也更新了在你的小提琴白色空間從你的小提琴中刪除http://jsfiddle.net/yvyonxhw/1/ – Mitul

#table{ 
    border-spacing: 0; 
    border-collapse: separate; 
}

border-spacing CSS屬性會幫助你。

邊框間距屬性設置相鄰小區

工作fiddle附着的邊界之間的距離。

來源

2015-06-29 09:46:16

若要從表中刪除邊框：

table { 
    border-collapse: collapse; 
}

你fixed JSFiddle

見here，爲什麼你應該使用border-collapse代替border-spacing

來源

2015-06-29 09:47:42

加厚你的TD邊界，直到它模糊了吧！（爲我工作）

table td{ 
    border: 2px solid black; 
}

然後，如果需要，使透明線更薄（1px）。

來源

2017-11-16 16:20:58 ling

如何爲表格創建連續的邊界線？

回答

相關問題