CSS UL LI布局實現表格效果
編輯：CSS詳解
今天帶了一篇簡短的教程，用CSS的UL LI制作實現一個表格，以往聽說CSS實現表格並不好，還不如直接用傳統的TABLE來實現，其實我不這麼認為，如果你CSS非常熟練了，用CSS來實現表格同樣很省事，不信就看一下這個代碼吧：
01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
02
<Html>
03
<head>
04
<title>用CSS的UL LI實現表格布局</title>
05
</head>
06
<style>
07
*{margin: 0 auto;padding: 0px;list-style: none;}
08
.e{width: 500px;border-top: solid #f00 1px;border-left: 1px solid #f00;display: table;margin-top: 50px;}/*定義表格區域大小和邊框等參數*/
09
li{float: left;}/*一定要記著讓LI向左浮動，這樣後邊的才會自動跟進*/
10
.id,.name,.x,.z,.d{color: #999;font-size: 12px;text-align: center;border-right: 1px solid #f00;border-bottom: 1px solid #f00;height: 22px;line-height: 22px;}/*定義表格表頭等*/
11
.id{width: 20px;}
12
.name{width: 50px;}
13
/*以下定義表格每列的寬度*/
14
.x{width: 30px;}
15
.z{width: 30px;}
16
.d{width: 365px;}
17
</style>
18
<body>
19
<div class="e">
20
<ul>
21
<li class="id">ID</li>
22
<li class="name">名字</li>
23
<li class="x">性別</li>
24
<li class="z">年齡</li>
25
<li class="d">地址</li>
26
</ul>
27
<ul>
28
<li class="id">1</li>
29
<li class="name">本山</li>
30
<li class="x">女</li>
31
<li class="z">22</li>
32
<li class="d">北京</li>
33
</ul>
34
<ul>
35
<li class="id">2</li>
36
<li class="name">小曾</li>
37
<li class="x">男</li>
38
<li class="z">26</li>
39
<li class="d">上海</li>
40
</ul>
41
</body>
42
</Html>
最後來看下表格的效果，還不錯吧，而且兼容火狐、Chrome等浏覽器。
小編推薦
熱門推薦