Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlapping table element left and right border

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;

}
like image 375
natsuki_2002 Avatar asked Sep 17 '13 14:09

natsuki_2002


3 Answers

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

like image 90
Harry Avatar answered Nov 15 '22 21:11

Harry


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; 
like image 22
kp7860 Avatar answered Nov 15 '22 21:11

kp7860


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

like image 43
darcher Avatar answered Nov 15 '22 20:11

darcher