读书人

css做table border 1px后怎么指定某个

发布时间: 2013-08-09 15:16:24 作者: rapoo

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



<tr class=tdborder0>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>

读书人网 >CSS

热点推荐