html - tablas - Elemento de tabla superpuesto borde izquierdo y derecho

tablas en html ejemplos

Question

Quiero configurar cada elemento en la primera fila de mi tabla para que tenga un borde izquierdo de un cierto color y un borde derecho de un cierto color. Desafortunadamente, parece que los bordes de las celdas de la tabla adyacentes se superponen y solo se muestra el color del borde izquierdo. El borde izquierdo se supone que es gris claro y el lado derecho gris oscuro.

Aquí está mi HTML generando la tabla. (HTML se genera en cereza)

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

Aquí está mi 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;
}

Answer 1

En su CSS, ha agregado el valor incorrecto para la propiedad de color de borde. Usted lo escribe como:

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

mientras que debería ser:

border-right-color: #6c6c6c; 

Answer 2

Es su uso del border-collapse: collapse; de border-collapse: collapse; use border-spacing:0;border-collapse:no-collapse; en lugar.

Answer 3

Use las siguientes propiedades en su 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