div 实现表格布局

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
< html >
< head >
< style >
     div.table{
         font-size:0;
         width:400px;
         border-top-style: solid;
         border-top-width: 1px;
         border-left-style: solid;
         border-left-width: 1px;
         margin:0 auto;
     }
 
 
     div.table>div>div{
         font-size:18;
         border-right-width: 1px;
         border-right-style: solid;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         width:199px;
         display:inline-block;
         margin:0px;
         padding:0px;
         text-align: center;
     }
 
 
 
     div.table>div:first-child{
         background-color:pink;
     }
 
</ style >
</ head >
< body >
< div  class = "table"  >
     < div >
         < div >ID</ div >
         < div >Name</ div >
     </ div >
 
     < div >
         < div >001</ div >
         < div >xiaohong</ div >
     </ div >
 
     < div >
         < div >002</ div >
         < div >xiaohong</ div >
     </ div >
 
         < div >
         < div >003</ div >
         < div >xiaohong</ div >
     </ div >
 
     < div >
         < div >004</ div >
         < div >xiaohong</ div >
     </ div >
 
     < div >
         < div >005</ div >
         < div >xiaohong</ div >
     </ div >
 
</ div >
 
</ body >
</ html >


 本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1659342

相关文章
|
6天前
div盒子垂直居中的3种方法
div盒子垂直居中的3种方法
32 2
|
前端开发
div文字居中
div文字居中
|
前端开发 容器
CSS样式(三) - div盒子
CSS样式(三) - div盒子
148 0
CSS样式(三) - div盒子
|
前端开发
div 居中方法汇总
居中问题无论在工作还是在面试中, 都是很常见的 下面我来给大家总结几种常用的方法, 大家可根据实际情况选择 好了, 废话不多说, 先看下效果 法1 定位+偏移 (margin) html css .
1022 0
div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。
1811 0