这也是非常常用的一种表格设计，多用在展示科学结果上。很多科学论文中往往会用这样的设计方式：简洁、明了。实现的原理也很简单，将原来<th>/<td>上的border属性拆分开来，通过border-top和border-bottom只渲染上下的网格线。当然为了格子之间不出现两条线，每个格子的线还要连到一起，务必设置<table>的border-collapse属性为collapse。
【示例】
-
HTML
<table> <caption> IE浏览器发展大事记 </caption> <thead> <tr> <th>版本</th> <th>发布时间</th> <th>绑定系统</th> </tr> </thead> <tbody> <tr> <td>Internet Explorer 1</td> <td>1995年8月</td> <td>Windows 95 Plus! Pack</td> </tr> <tr> <td>Internet Explorer 2</td> <td>1995年11月</td> <td>Windows和Mac</td> </tr> <tr> <td>Internet Explorer 3</td> <td>1996年8月</td> <td>Windows 95 OSR2</td> </tr> <tr> <td>Internet Explorer 4</td> <td>1997年9月</td> <td>Windows 98</td> </tr> <tr> <td>Internet Explorer 5</td> <td>1999年3月</td> <td>Windows 98 Second Edition</td> </tr> <tr> <td>Internet Explorer 5.5</td> <td>2000年9月</td> <td>Windows Millennium Edition</td> </tr> <tr> <td>Internet Explorer 6</td> <td>2001年10月</td> <td>Windows XP</td> </tr> <tr> <td>Internet Explorer 7</td> <td>2006年下半年</td> <td>Windows Vista</td> </tr> <tr> <td>Internet Explorer 8</td> <td>2009年3 月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 9</td> <td>2011年3月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 10</td> <td>2012年</td> <td>Windows 8</td> </tr> <tr> <td>Internet Explorer 11</td> <td>2013年6月</td> <td>Windows 8.1</td> </tr> <tr> <td>Spartan浏览器</td> <td>2015年3月</td> <td>Windows 10</td> </tr> </tbody> </table> -
CSS
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; } caption { font-size: larger; margin: 1em auto; } th, td { padding: .65em; } th, td { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; }