问题描述
如图，用HTML画了一个表格，给表格加上了border，却发现每个td之间总有一点点间隙，影响美观
HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
font-size: 14px;
}
* {
margin: 0;
padding: 0;
}
.mytable {border-left:#b7cee2 solid 1px;border-top:#b7cee2 solid 1px; width:100%;}
.mytable th, .mytable td{border-right:#b7cee2 solid 1px;border-bottom:#b7cee2 solid 1px;}
.mytable .bg_gray{background:#EEEEEE;}
.mytable th{text-align:center; font-size:14px; height:52px; vertical-align:middle;}
.mytable th small{font-size:10px; font-weight:normal;}
.mytable td{height:38px; vertical-align:middle; text-align:center;}
</style>
</head>
<body>
<div style="padding: 10px;">
<table class="mytable">
<tbody>
<tr>
<td class="bg_gray">8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月10日 星期二</td>
<td>某某功能2</td>
</tr>
<tr>
<td>8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月10日 星期二</td>
<td>某某功能2</td>
</tr>
<tr>
<td>8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月10日 星期二</td>
<td>某某功能2</td>
</tr>
<tr>
<td>8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月10日 星期二</td>
<td>某某功能2</td>
</tr>
<tr>
<td>8月9日 星期一</td>
<td>某某功能</td>
</tr>
<tr>
<td>8月10日 星期二</td>
<td>某某功能2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
问题解决
给table加上css: style="border-collapse:collapse"便可解决
.mytable {border-left:#b7cee2 solid 1px;border-top:#b7cee2 solid 1px; width:100%; border-collapse:collapse;}
如图，现在舒服了！
border-collapse说明如下：
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
文章评论