首页 > 未分类 > html的table表格填充单元格边距(cellpadding) 消除单元格的间隙
2014
05-16

html的table表格填充单元格边距(cellpadding) 消除单元格的间隙

在平时使用table中,经常会遇到table表格的单元格(cell)中出现一些空隙,非常能难看,这时我们在表格中加上  border-collapse: collapse; 就可以了。
可以看下面例子:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
table {border:#000 1px solid;border-collapse: collapse;padding: 3px;}
td {margin:5px;padding:5px;border:#000 1px solid}
</style>
<table style="color: #666666;border-collapse: collapse;" border="1" cellspacing="1" bordercolordark="#ffffff" cellpadding="2" width="100%" align="center">
<tr height="26">
<td bgcolor="#f6f6f6" align="center">特殊符号</td>
<td bgcolor="#f6f6f6">命名实体</td>
<td bgcolor="#f6f6f6">十进制编码</td>
</tr>
<tr>
<td bgcolor="#f6f6f6" align="center">&#913;</td>
<td align="center">&amp;Alpha;</td>
<td style="padding:10px;" >&amp;#913;</td>
</tr>
<tr>
<td bgcolor="#f6f6f6" align="center">&#916;</td>
<td align="center">&amp;Delta;</td>
<td style="padding:10px;">&amp;#916;</td>
</tr>
</table>
</body>
</html>            

    或者可以直接在CSS中加上:

<style type="text/css">
table {border:#000 1px solid;border-collapse: collapse;padding: 3px;}
td {margin:5px;padding:5px;border:#000 1px solid}
</style>
就可以了。


友荐云推荐