小虾虎鱼

小虾虎鱼

使用ul,li制作表格

作者 禾惠 发表于 2013/01/24,最后修改于 2013/01/24

使用table制作表格确实方便,但使用ul,li制作表格也并非一件难事。下面分享一下我平常使用ul,li制作表格的方法。

CSS:

/*清除浮动*/
.table ul:before, .table ul:after{content:"";display:table;}
.table ul:after{clear:both;}
.table ul{zoom: 1;}
       
.table ul{border:#ccc solid;}
.table ul.table-header{border-width:1px 1px 1px 0;background:#f8f8f8;}
.table ul.table-item{border-width:0 1px 1px 0;}
.table li{float:left;text-align:center;}
.table li div{border-left:1px solid #ccc;height:24px;line-height:24px;}
.table li.td-1{width:10%;}
.table li.td-2{width:30%;}
.table li.td-3{width:20%;}
.table li.td-4{width:40%;*width:39%;/*针对IE6/7*/}


HTML:

<div class="table">
    <ul class="table-header">
        <li class="td-1"><div>序号</div></li>
        <li class="td-2"><div>姓名</div></li>
        <li class="td-3"><div>性别</div></li>
        <li class="td-4"><div>职位</div></li>
    </ul>
    <ul class="table-item">
        <li class="td-1"><div>1</div></li>
        <li class="td-2"><div>曹穗溪</div></li>
        <li class="td-3"><div>男</div></li>
        <li class="td-4"><div>页面重构</div></li>
    </ul>
    <ul class="table-item">
        <li class="td-1"><div>2</div></li>
        <li class="td-2"><div>曹穗溪</div></li>
        <li class="td-3"><div>男</div></li>
        <li class="td-4"><div>前端开发</div></li>
    </ul>
</div>


从以上代码看出制作ul,li制作表格唯一麻烦的地方就是要算好li的宽度(即百分比)。


使用此方法制作表格需要了解注意以下几点:

        1、CSS中,第2,3,4行代码是清除浮动所用;

        2、CSS中,第14行代码中的 *width:39%; 是针对于IE6/7浏览器;

        3、确保ul里面所有li的width之和为100%,IE6/7中确保为99%(避免错乱)