Css制作table细线表格

最新推荐文章于 2024-06-21 09:13:54 发布

weixin_30387423

最新推荐文章于 2024-06-21 09:13:54 发布

阅读量136

点赞数

原文链接：http://www.cnblogs.com/yeqrblog/p/6513567.html

版权

制作细线表格，我想应该是最基本的css知识了，记录下来巩固下。

推荐：

table{  
    border-collapse:collapse;  
    border: 1px solid #000000;  
}  

td{  
    border-collapse:collapse;  
    border: 1px solid #000000;  
}

示例：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8">
    <title>Css制作table细线表格</title> 
    <style type="text/css"> 
       .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }
    </style> 
</head> 
<body> 
    <table class="table" cellspacing="0" cellpadding="0">
    <thead>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话号码</th>
        <th>生日</th>
    </thead>
    <tbody>
        <tr><td>1</td><td>coco</td><td>男</td><td>12345678888</td><td>2018-04-11 00:00:00</td></tr>
        <tr><td>2</td><td>cici</td><td>男</td><td>13688889999</td><td>2018-04-11 00:00:00</td></tr>
        <tr><td>3</td><td>tom</td><td>男</td><td>13656565656</td><td>2018-04-11 00:00:00</td></tr>
    </tbody>
</table>
</body> 
</html>