日期:2014-05-16  浏览次数:20713 次

css做table border 1px后如何指定某个td为0px
详细格式不全部写了,向自己保证省略的那些写法是正确的。

写法如下:
.tableborder1px
{
border-collapse:collapse;
}
.tableborder1px td
{
border:1px solid #000000;
}

<table class=tableborder1px>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>


现在想修改一下
第二行<tr>(2-1,2-2,2-3)的这里,3个单元格之间没有边框
手写style效果如下,

<tr>
<td style="border-right:0px solid #000000;">2-1</td>
<td style="border-left:0px solid #000000;border-right:0px solid #000000;">2-2</td>
<td style="border-left:0px solid #000000;">2-3</td>
</tr>


如何写进css文件里?

------解决方案--------------------


<style>
.tableborder1px
{
border-collapse:collapse;
}
.tableborder1px td
{
border:1px solid #000000;
}

.tableborder1px tr:nth-child(2) td{
 border-left:0px solid #000000;border-right:0px solid #000000;
}
.tableborder1px tr:nth-child(2) td:last-child{
 border-right:1px solid #000000;
}
.tableborder1px tr:nth-child(2) td:first-child{
 border-left:1px solid #000000;
}

</style>

<table class=tableborder1px>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

这IE9下好像不支持这样写,如果考虑兼容还是用 分别写个样式,用class标示
------解决方案--------------------
.tdborder0 td {border:0;}