您的位置：首页 > Web前端 > HTML

table空单元格边框不显示的解决方法

2013-05-30 15:08 465 查看
对于表格，当每个单元格里都有数据时，表格的边框会显示，当某个单元格为空时，会发现边框无法正常显示，问题产生的原因有多种，解决方法也不同。
情形一：标准模式下（ie6、ie7下有问题，ie8、firefox、chrome、opera、safari正常）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>萤火开发网</title>
<style type="text/css">
body{font:12px arial}
.mTable{border-left:1px solid #666;border-top:1px solid #666; }
.mTable td{border-right:1px solid #666;border-bottom:1px solid #666}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
</body>
</html>


解决方法一：（给空单元格增加一个实体空格）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>萤火开发网</title>
<style type="text/css">
body{font:12px arial}
.mTable{border-left:1px solid #666;border-top:1px solid #666; }
.mTable td{border-right:1px solid #666;border-bottom:1px solid #666}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td> </td>
</tr>
</table>
</body>
</html>


情形二：quirks模式下（ie6、ie7、firefox、opera下有问题，ie8、chrome、safari正常）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>萤火开发网</title>
<style type="text/css">
body{font:12px arial}
.mTable{border-left:1px solid #666;border-top:1px solid #666}
.mTable td{border-right:1px solid #666;border-bottom:1px solid #666}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td> </td>
</tr>
</table>
</body>
</html>

解决方法一：（给空单元格增加一个实体空格）

解决方法二：（使用empty-cells:show，ie6、ie7无效、其他均有效）[该方法经LZ验证可能会失效,原因可能是因为表格边框实现的方式,LZ使用了th实现分组表头,td组建单元格]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>萤火开发网</title>
<style type="text/css">
body{font:12px arial}
.mTable{border-left:1px solid #666;border-top:1px solid #666; empty-cells:show}
.mTable td{border-right:1px solid #666;border-bottom:1px solid #666}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
</body>
</html>

解决方法：表格边框实现的方式也会对上述情况有些影响，下面我们更改一下实现方式，就可以避免此问题。[该方法更加实用]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>萤火开发网</title>
<style type="text/css">
body{font:12px arial}
.mTable{border:1px solid #666;border-collapse:collapse;}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
</body>
</html>


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML
相关文章推荐
新的分享
章节导航