css border-collapse:collapse解决表格tr边框无效的问题

时间:2016-07-18
今天在做网页时,需要使用到table,并将表格tr的边框设置为2px solid red,但发现不取任何作用,后来结果查阅资料,发现是border-collapse属性在作怪,于是记录下来供大家参考。

今天写了一个表格,并将表格的tr设置了边框样式border:2px solid red; 但这个css样式貌似没有取到任何作用,百思不得其解。先让大家看一下我的html css代码:

<html>
<head>
<title>http://www.manongjc.com/article/1212.html</title>
<style>
table{width:300px; height:200px;}
tr{border:2px solid #000;}
</style>
</head>
<body>
<table>
	<tr>
    	<td>码农教程</td>
    	<td>css教程</td>
    	<td>html教程</td>
    	<td>java教程</td>
    </tr>
	<tr>
    	<td>码农教程</td>
    	<td>css教程</td>
    	<td>html教程</td>
    	<td>java教程</td>
    </tr>
</table>
</body>
</html>

运行结果如下:

css border-collapse:collapse解决tr边框无效的问题

从图中可以看出tr{border:2px solid #000;}样式并没有取作用,什么原因呢?后来结果查阅资料才知道,我们必须要将table的border-collapse样式设置为collapse

正确代码:

<html>
<head>
<title>http://www.manongjc.com/article/1212.html</title>
<style>
table{width:300px; height:200px;border-collapse:collapse;}
tr{border:2px solid #000;}
</style>
</head>
<body>
<table>
	<tr>
    	<td>码农教程</td>
    	<td>css教程</td>
    	<td>html教程</td>
    	<td>java教程</td>
    </tr>
	<tr>
    	<td>码农教程</td>
    	<td>css教程</td>
    	<td>html教程</td>
    	<td>java教程</td>
    </tr>
</table>
</body>
</html>

结果:

css border-collapse:collapse解决tr边框无效的问题

上一页 下一页

原文地址:http://www.manongjc.com/article/1212.html