Css製做table細線表格

時間 2019-12-11

標籤 css 製做 table 細線表格欄目 CSS 简体版

原文原文鏈接

製做細線表格，我想應該是最基本的css知識了，記錄下來鞏固下。css

推薦：html

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

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

示例：spa

<!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>