I am currently working on an HTML table and I need to create continuous lines for different rows while keeping the first row separate. The challenge is to connect the lines with blue circles without affecting the top row which serves as the header. Is there a way to achieve this?Check out the fiddle for the HTML and CSS code.
<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;
}