Css制作table細線表格


制作細線表格,我想應該是最基本的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>

效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM