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

Css制作table细线表格

2017-03-07 10:53 741 查看
制作细线表格，我想应该是最基本的css知识了，记录下来巩固下。

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta charset="utf-8">
5     <title>Css制作table细线表格</title>
6     <style type="text/css" media="screen">
7         /* PR-CSS */
8         table {
9             border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
10             border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
11             border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
12         }
13         table th,table td {
14             border:solid #999;
15             border-width:0 1px 1px 0;
16             padding:2px;
17         }
18         tfoot td {text-align:center;}
19     </style>
20 </head>
21 <body>
22     <table>
23         <thead>
24             <tr><th>名称</th><th>网址</th><th>时间</th></tr>
25         </thead>
26         <tbody>
27             <tr><td>百度</td><td>http://www.baidu.com</td><td>2017.03.07</td></tr>
28             <tr><td>百度</td><td>http://www.baidu.com</td><td>2017.03.07</td></tr>
29             <tr><td>百度</td><td>http://www.baidu.com</td><td>2017.03.07</td></tr>
30         </tbody>
31         <tfoot>
32             <tr><td colspan="3">下一页</td></tr>
33         </tfoot>
34     </table>
35 </body>
36 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航