4

Here is a sample of my current code: jsfiddle

The problem is, the dark gray line between the table header and body is getting cut by the margin-right of the cells. I want to have a that border between columns and a non-breaked margin between header and body table.

Here is the HTML:

<table id="prazo"> <thead> <tr> <th>month</th> <th> val </th> <th> val </th> <th> val </th> <th> val </th> <th> val </th> <th>val</th> </tr> </thead> <tbody> <tr class="srow"> <td>January</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> </tr> <tr> <td>January</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> </tr> <tr class="srow"> <td>January</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> <td>$100</td> </tr> </tbody> </table>

and the css:

#prazo { font-family: 'Bitter', serif; width: 100%; border-spacing:0; border-collapse:collapse; } #prazo thead tr{ height: 50px; background-color: #ffffff; font-weight:bold; border-bottom: 3px solid #7d7d7d !important; } #prazo td, th { padding-left: 10px; padding-right: 10px; font-size: 14px; height: 30px; background-color: #ffffff; border-right: 3px solid #f6f6f6; } .srow td { background-color: #f2f2f2 !important; } #prazo th { font-size: 16px; }
Improve this question
4
  • 3
    If you reduce the border to 2px then it collapses fine. I'll have a look more into this, but for now here is a jsFiddle of it working: jsfiddle.net/mzALe/7 Commented Nov 6, 2013 at 12:08
  • @Martin good spot seems to take the highest width border over the lower one Commented Nov 6, 2013 at 12:12
  • Also, don't style TRs. And if you'd really like to save the 3px border-width on the right of each cell, you could always do <tr><td colspan="7" style="height:3px;background:red;"></td></tr> directly underneath your TR with THs. Commented Nov 6, 2013 at 12:21
  • @Martin thanks, it worked. It would be good to keep the 3px border instead of the 2px one. And I'm curious about this solution. By now I'll use yours :) Commented Nov 6, 2013 at 12:52

5 Answers 5

Reset to default
1

The best I can come up with is to either: increase the width of the darker border to 4px (border-right: 4px solid #7d7d7d;)
or
reduce the width of the other border to 2px (border-right: 2px solid #f6f6f6;).

See this jsFiddle

Not the best of answers, but it does give you a solid dark border and keep the lighter one between the th cells.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
#prazo td, th { background-color: #FFFFFF; border-right: 3px solid #F6F6F6; font-size: 14px; height: 30px; padding-left: 10px; padding-right: 10px; }

remove following line from above css

border-right: 3px solid #F6F6F6;
Improve this answer

1 Comment

You would then lose the line between the right of the th cells.
0

How about changing your final style to:

#prazo th { font-size: 16px; border-bottom: 3px solid #7d7d7d !important; border-right:0 !important; }

and removing the bottom border higher up

Improve this answer

1 Comment

Comment on @Parixit's answer threw me off, but yeah his solution produces the same style as this.
0

You only need to give bottom border to each header cell.

Please add following style:

 #prazo th { font-size: 16px; border-bottom: 3px solid #7d7d7d !important; }

Please check here for demo

Improve this answer

4 Comments

As with the other answer you would lose the line between the th cells.
@Martin Does he wants border between header cells?
the question doesn't specifiy, but as they were there before hand I assumed so.
Yep, I want the border beetween th cells
0

For those who are curious here is a good approach.

I used Martin solution :)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.