用dl-dt-dd实现表格

css

 1 dl {
 2     margin: 0 auto;
 3     width: 340px;
 4     border-right: 1px solid #f8b3d0;
 5 }
 6 
 7 dl dt {
 8     background: #ff99cc;
 9     color: #fff;
10     line-height: 40px;
11 }
12 
13 dl dd {
14     line-height: 30px;
15     border-bottom: 1px solid #f8b3d0;
16     margin-left: 0px;
17     background: #fff5fa;
18 }
19 
20 dl span {
21     display: inline-block;
22     border-left: 1px solid #f8b3d0;
23     width: 80px;
24     text-align: center;
25 }

html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
 7     </head>
 8     <body>
 9         <dl>
10             <dt>
11                 <span>姓名</span>
12                 <span>性别</span>
13                 <span>年龄</span>
14                 <span>备注</span>
15             </dt>
16             <dd>
17                 <span>1——</span>
18                 <span>——</span>
19                 <span>——</span>
20                 <span>——</span>
21             </dd>
22             <dd>
23                 <span>2——</span>
24                 <span>——</span>
25                 <span>——</span>
26                 <span>——</span>
27             </dd>
28         </dl>
29     </body>
30 </html>

效果：

 

posted @ 2021-10-27 19:36  十七日尾  阅读(162)  评论(0)    收藏  举报