远左边框在整个表格中都不显示任何内容。我如何在下面的CSS代码中修复它?边框现在显示所有其他细胞都很好的颜色。
以下是我现有的CSS代码。提前致谢。
#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>
答案 0 :(得分:1)
如果我理解得对,你想要左td
的相同边框。你可以用这个:
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>
答案 1 :(得分:1)
好吧,您可以在border-left: 1px solid #C1DAD7;
定义中添加td
,也可以在border-collapse: separate;
中将border-collapse: collapse;
更改为#mytable
。
也可以在border-left: 1px solid #C1DAD7;
的整个表格中添加左#mytable
。
答案 2 :(得分:0)
常见的解决方案是使用:first-child
或相邻的运算符:+
但IE6中不支持这些运算符。如果需要,您可能需要为这些样式单独处理该浏览器。 (可能使用条件评论?)
无论如何,我试图拿出相关的CSS并假设有关标记的一些事情来提出这个:
#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>