Table CSS left border Issue with CSS Code - css

Question

Far Left borders shows nothing in entire table. how do I fix it in below CSS code ? Border is now showing any of the color all other cells are good.
Below is my existing CSS Code. Thanks in Advance.
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(/images/bullet1.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(/images/bullet2.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/* Below CSS is used for jQuery Popup window used for File Upload*/
#fade {
/*--Transparent background layer--*/
display: none;
/*--hidden by default--*/
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none;
/*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
<table id="mytable">
<tr>TEST</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST
<td>TEST</td>
</tr>
</table>

Answer 1

If I understand right you want the same border in left td. You can use this:
td:first-child {
border-left: 1px solid #C1DAD7;
}
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(/images/bullet1.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(/images/bullet2.gif) no-repeat;
font: bold 10px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/* Below CSS is used for jQuery Popup window used for File Upload*/
#fade {
/*--Transparent background layer--*/
display: none;
/*--hidden by default--*/
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none;
/*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
<table id="mytable">
<tr>TEST</tr>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST
<td>TEST</td>
</tr>
</table>

Answer 2

Well, you could just add border-left: 1px solid #C1DAD7; to your td definition and maybe change border-collapse: separate; to border-collapse: collapse; in #mytable.
It's also possible to add left border-left: 1px solid #C1DAD7; on entire table in #mytable.

Answer 3

The common solution is to either use :first-child or the adjacent operator: + but these are not supported in IE6. You may need to handle that browser separately for these styles if this is a requirement. (Use conditional comments, maybe?)
Anyway, I've tried to pull out the relevant CSS and assumed some things about the markup to come up with this:
#mytable {
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: separate;
border: 1px solid #C1DAD7;
}
td + td, th + th {
border-left: 1px solid #C1DAD7;
}
tr + tr {
border-top: 1px solid #C1DAD7;
}
td {
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(/images/bg_header.jpg) no-repeat;
}
<table id="mytable">
<tr>
<th>TEST1</th>
<th>TEST2</th>
<th>TEST3</th>
<th>TEST4</th>
</tr>
<tr>
<td>TEST1</td>
<td>TEST2</td>
<td>TEST3</td>
<td>TEST4</td>
</tr>
</table>