首页 > 建站教程 > Div+Css >  tr加css border边框无效解决办法border-collapse正文

tr加css border边框无效解决办法border-collapse

今天我爱模板网在布局时遇到一个问题，就是用表格布局一个如下的效果：


这个，给tr比较好，table的话，只有外面有边框，而用td，就非常麻烦。可是，我写了如下的代码，给tr加了边框，发现火狐、360极速、IE8都不显示： 
<style>
table{width:300px; height:200px;}
tr{border:2px solid #000;}
</style>

<table>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
</table>
显示效果如下：


摸索了一会，发现给table加个“border-collapse:collapse”，效果就出来了，但是IE浏览器还是不显示，没办法了。代码如下： 
<style>
table{width:300px; height:200px; border-collapse:collapse}
tr{border:2px solid #000;}
</style>

<table>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
	<tr>
    	<td>模板网</td>
    	<td>网页模板</td>
    	<td>建站教程</td>
    	<td>透明flash</td>
    </tr>
</table>
显示效果如下：

TAGS: 加  css  border  边框  无效  解决  办法  border-collapse