[英]How can I create continuous border line for table?
I am creating a table using html. 我正在使用html创建表。 I want to create continuous lines for different table rows without connecting lines for the first row.
我想为不同的表行创建连续的行,而不必为第一行连接行。 Using border-collapse attribute of table could help join the lines but this would also join the line of header, leaving no space between cells of header.
使用table的border-collapse属性可以帮助连接线,但这也可以连接标题行,在标题单元格之间不留任何空间。 What can I do to connect lines with blue circle without affecting the highest one?
如何在不影响最高圆的情况下用蓝色圆圈连接线? Here's the fiddle , html and css codes.
这是小提琴 ,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;
}
#table {
border-spacing:0
}
is your answer 是你的答案
Please add the cellspacing to the table tag. 请将单元格间距添加到表格标签中。
<table id="table" cellspacing="0">
Demo http://jsfiddle.net/yvyonxhw/1/ 演示http://jsfiddle.net/yvyonxhw/1/
To remove borders from table: 要从表格中删除边框:
table {
border-collapse: collapse;
}
Your fixed JSFiddle 您固定的JSFiddle
See here as to why you should use border-collapse
instead of border-spacing
见这里 ,为什么你应该使用
border-collapse
,而不是border-spacing
Thicken your td border until it blurs it out! 加厚您的td边框,直到模糊为止! (worked for me)
(为我工作)
table td{
border: 2px solid black;
}
And then make the transparent lines thinner (1px) if necessary. 然后根据需要使透明线变细(1px)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.