设置Table边框的CSS

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 table, td, th {
 6     border: 1px solid black;
 7 }
 8 
 9 table {
10     border-collapse: collapse;
11     width: 100%;
12 }
13 
14 th {
15     height: 50px;
16 }
17 </style>
18 
19 <script>
20 var _hmt = _hmt || [];
21 (function() {
22 var hm = document.createElement("script");
23 hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925";
24 var s = document.getElementsByTagName("script")[0];
25 s.parentNode.insertBefore(hm, s);
26 })();
27 </script>
28 </head>
29 <body>
30 
31 <h2>The width and height Properties</h2>
32 <p>Set the width of the table, and the height of the table header row:</p>
33 
34 <table>
35   <tr>
36     <th>Firstname</th>
37     <th>Lastname</th>
38     <th>Savings</th>
39   </tr>
40   <tr>
41     <td>Peter</td>
42     <td>Griffin</td>
43     <td>$100</td>
44   </tr>
45   <tr>
46     <td>Lois</td>
47     <td>Griffin</td>
48     <td>$150</td>
49   </tr>
50   <tr>
51     <td>Joe</td>
52     <td>Swanson</td>
53     <td>$300</td>
54   </tr>
55   <tr>
56     <td>Cleveland</td>
57     <td>Brown</td>
58     <td>$250</td>
59 </tr>
60 </table>
61 
62 </body>
63 </html>
View Code