zoukankan html css js c++ java

在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是有 border, 没有 padding 的.

1.初始:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cellspacing的css实现</title>
 6     <style type="text/css">
 7 
 8         table {
 9             border: 1px solid red;
10         }
11         td {
12             border: 1px solid red;
13         }
14     </style>
15 </head>
16 <body>
17 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>
18 
19     <table>
20         <tr>
21             <td>单元格1-1</td>
22             <td>单元格1-2</td>
23         </tr>
24         <tr>
25             <td>单元格2-2</td>
26             <td>单元格2-2</td>
27         </tr>
28         <tr>
29             <td>单元格3-1</td>
30             <td>单元格3-2</td>
31         </tr>
32     </table>
33 
34 </body>
35 </html>

效果:

2. 通过css实现: cellspacing = 0;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cellspacing的css实现</title>
 6     <style type="text/css">
 7 
 8         table {
 9             border: 1px solid red;
10             border-collapse: collapse;
11         }
12         td {
13             border: 1px solid red;
14         }
15     </style>
16 </head>
17 <body>
18 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>
19 
20     <table>
21         <tr>
22             <td>单元格1-1</td>
23             <td>单元格1-2</td>
24         </tr>
25         <tr>
26             <td>单元格2-2</td>
27             <td>单元格2-2</td>
28         </tr>
29         <tr>
30             <td>单元格3-1</td>
31             <td>单元格3-2</td>
32         </tr>
33     </table>
34 
35 </body>
36 </html>

 border-collapse: collapse; 是针对 <table>元素的.

效果:

3. css实现 cellspacing = xx;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cellspacing的css实现</title>
 6     <style type="text/css">
 7 
 8         table {
 9             border: 1px solid red;
10             border-collapse: separate;
11             border-spacing: 20px;
12         }
13         td {
14             border: 1px solid red;
15         }
16     </style>
17 </head>
18 <body>
19 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>
20 
21     <table>
22         <tr>
23             <td>单元格1-1</td>
24             <td>单元格1-2</td>
25         </tr>
26         <tr>
27             <td>单元格2-2</td>
28             <td>单元格2-2</td>
29         </tr>
30         <tr>
31             <td>单元格3-1</td>
32             <td>单元格3-2</td>
33         </tr>
34     </table>
35 
36 </body>
37 </html>

10             border-collapse: separate;
11             border-spacing: 20px;

1--  border-spacing 只有在 border-collapse : separate 时 才会起作用.
2--  border-collapse,  border-spacing 都是 针对  <table>元素的.

4. css实现 cellpadding

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cellspacing的css实现</title>
 6     <style type="text/css">
 7 
 8         table {
 9             border: 1px solid red;
10             border-collapse: collapse;
11 
12 
13         }
14         td {
15             border: 1px solid red;
16             padding: 20px;
17         }
18     </style>
19 </head>
20 <body>
21 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>
22 
23     <table>
24         <tr>
25             <td>单元格1-1</td>
26             <td>单元格1-2</td>
27         </tr>
28         <tr>
29             <td>单元格2-2</td>
30             <td>单元格2-2</td>
31         </tr>
32         <tr>
33             <td>单元格3-1</td>
34             <td>单元格3-2</td>
35         </tr>
36     </table>
37 
38 </body>
39 </html>

1-- border-collapse 是针对 <table>元素的. padding 是针对 td 元素的.

-----------------------------------------------------------------------------------------------------

5. tr, th 有border . 没有 padding

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cellspacing的css实现</title>
 6     <style type="text/css">
 7 
 8         table {
 9             border: 1px solid red;
10             border-collapse: collapse;
11 
12 
13         }
14         tr {
15             border: 1px solid black;
16             padding: 20px;
17         }
18     </style>
19 </head>
20 <body>
21 <h1>HTML5 不支持 &lt;table&gt; cellspacing 属性。</h1>
22 
23     <table>
24         <tr>
25             <td>单元格1-1</td>
26             <td>单元格1-2</td>
27         </tr>
28         <tr>
29             <td>单元格2-2</td>
30             <td>单元格2-2</td>
31         </tr>
32         <tr>
33             <td>单元格3-1</td>
34             <td>单元格3-2</td>
35         </tr>
36     </table>
37 
38 </body>
39 </html>

效果:

参考链接:

CSS中cellspacing和cellpadding属性用法揭秘

查看全文

相关阅读:
新一代MQ apache pulsar的架构与核心概念
 Flutter使用fluwx实现微信分享
 BZOJ3622 已经没有什么好害怕的了动态规划容斥原理组合数学
 NOIP2016提高组Day1T2 天天爱跑步树链剖分 LCA 倍增差分
 Codeforces 555C Case of Chocolate 其他
 NOIP2017提高组Day2T3 列队洛谷P3960 线段树
 NOIP2017提高组Day2T2 宝藏洛谷P3959 状压dp
NOIP2017提高组Day1T3 逛公园洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划最短路拓扑序
 Codeforces 873F Forbidden Indices 字符串 SAM/(SA+单调栈)
Codeforces 873E Awards For Contestants ST表