表格细边框

最新推荐文章于 2023-11-15 09:16:47 发布

原创最新推荐文章于 2023-11-15 09:16:47 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class

web页面专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种实现网页中细边框表格的方法，通过CSS设置实现了简洁美观的表格效果。

网页中经常会遇到使用细边框的情况，下面是一种不错的可选方案：

<html>
<head>
<title>表格细边框</title>
<style type="text/css"> 
<!--
.printTable{border-collapse:collapse;}
.printTable th{background:#ffffff;border:solid 1px #000000;}
.printTable td{background:#ffffff;border:solid 1px #000000;}
--> 
</style>
</head>
<body>
<table class="printTable">
  <tr>
    <td><p>姓名</p></td>
    <td><p>年龄</p></td>
  </tr>
  <tr>
    <td><p>张三</p></td>
    <td><p>20</p></td>
  </tr>
  <tr>
    <td><p>李四</p></td>
    <td><p>22</p></td>
  </tr>
</table>
</body>
</html>

效果图如下：