Overlapping table element left and right border

Question

I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells are overlapping and I only get the left border color showing. The left border is supposed to be light gray and the right side dark gray.

enter image description here

Here is my HTML generating the table. (HTML is generated in cherrypy)

<th id="tbl_head" colspan='4'>%s</th>
    <tr>
        <td id="colhead">Track</td>
        <td id="colhead">Artist</td>
        <td id="colhead_time">Time</td>
        <td id="colhead">Album</td>
    </tr>

Here is my CSS:

table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-collapse: collapse;
}

td {
    padding: 3px;
}

#colhead {
    font-weight: bold;
    text-align: left;
    background-color: #989898;
    color: #000000;

    border-left-color:   #aeaeae;
    border-left-style: solid;
    border-left-width: 2px;

    border-right-color: #6c6c6c;    
    border-right-style: solid;
    border-right-width: 1px;

}

#colhead_time {
    font-weight: bold;
    text-align: right;
    background-color: #989898;
    color: #000000;

    border-left-color:   #aeaeae;
    border-left-style: solid;
    border-left-width: 2px;

    border-right-color: #6c6c6c;    
    border-right-style: solid;
    border-right-width: 1px;

}

Tried without `border-collapse`? Also, your `border-right-color` is not having valid values as pointed out in user2788058's answer below. — Harry, Sep 17 '13 at 14:31
removing `border-collapse` and i can see both dark and light gray but I get an awful white line dividing up all of the cells in my table — natsuki_2002, Sep 17 '13 at 14:35

Harry · Accepted Answer · 2015-10-24T07:24:10.967

Use the below properties on your table CSS.

border-collapse: separate;
border-spacing: 0px;

table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  margin-left: auto;
  margin-right: auto;
  border-width: 1px;
  border-collapse: separate;
  border-spacing: 0px;
}
td {
  padding: 3px;
}
#colhead {
  font-weight: bold;
  text-align: left;
  background-color: #989898;
  color: #000000;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: blue;
  border-right-style: solid;
  border-right-width: 1px;
}
#colhead_time {
  font-weight: bold;
  text-align: right;
  background-color: #989898;
  color: #000000;
  border-left-color: red;
  border-left-style: solid;
  border-left-width: 2px;
  border-right-color: blue;
  border-right-style: solid;
  border-right-width: 1px;
}

<table>
  <th id="tbl_head" colspan='4'>%s</th>
  <tr>
    <td id="colhead">Track</td>
    <td id="colhead">Artist</td>
    <td id="colhead_time">Time</td>
    <td id="colhead">Album</td>
  </tr>
</table>

Fiddle Demo

solved a td border issue in pdf. td border was getting larger than table width. Thanks ! — varun, Jan 15 '15 at 06:37
@varun: Welcome mate. Its nice to note that an old answer was helpful :) — Harry, Jan 15 '15 at 06:55

score 3 · Answer 2 · edited Sep 17 '13 at 14:32

3

In your css, you have added the wrong value for border-color property. You write it as:

border-right-color: 1px solid #6c6c6c;

while it should be:

border-right-color: #6c6c6c;

edited Sep 17 '13 at 14:32

Harry

87,580
25
202
214

answered Sep 17 '13 at 14:29

kp7860

31
2

Please add a ` both in front and end of the inline code blocks to format them as code. For multi-line codes, use the `{}` button in the button bar. – Harry Sep 17 '13 at 14:32

score 2 · Answer 3 · answered Sep 17 '13 at 14:43

2

It's your use of border-collapse: collapse; use border-spacing:0;border-collapse:no-collapse; instead.

answered Sep 17 '13 at 14:43

darcher

3,052
3
24
29

1

There isn't a 'no-collapse' value for border-collapse. I think you ment 'separate' https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse – Lorenzo Gangi Sep 13 '18 at 23:09

Overlapping table element left and right border

3 Answers3