CODEWITHSUNDEEP
htmlcss
Ken Kwok
Ken Kwok

Reputation: 388

How can I create continuous border line for table?

enter image description here

I am creating a table using 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. What can I do to connect lines with blue circle without affecting the highest one? Here's the fiddle, html and css codes.

    <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;
}

Upvotes: 0

Views: 3523

Answers (5)

ling
ling

Reputation: 10037

Thicken your td border until it blurs it out! (worked for me)

table td{
   border: 2px solid black;
}

And then make the transparent lines thinner (1px) if necessary.

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8256

To remove borders from table:

table {
    border-collapse: collapse;
}

Your fixed JSFiddle

See here as to why you should use border-collapse instead of border-spacing

Upvotes: 0

DesignSnippet.com
DesignSnippet.com

Reputation: 308

#table {
    border-spacing:0
}

is your answer

Upvotes: 5

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

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

border-spacing css property will help you.

The border-spacing property sets the distance between the borders of adjacent cells

Working fiddle is attached.

Upvotes: 0

Mitul
Mitul

Reputation: 3437

Please add the cellspacing to the table tag.

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

Demo http://jsfiddle.net/yvyonxhw/1/

Upvotes: 0

Related Questions