DIV+CSS制作(table)表格的方法

发布时间：2022-12-25 14:29:33 来源：互联网

.

雪花，是世界上最圣洁的花，当你静静的倾听天籁，尘世的浮躁与喧嚣，似乎都已离你远去，剩下的惟有纯净，那是心灵忘却一切的畅然，那是在没有尘埃的世界里，生命自由呼吸的平淡与安恬。

在前端的网页设计需求中，有时候需要使用表格来展示一些数据，但又不能使用 html 中的 table 标签来做，那么我们只有使用 DIV + CSS 来画一个表格了。下面就介绍几种方法，大家来参考一下！

使用 DIV+CSS 制作一个表格

先上一个由CSS+DIV简单制作的表格样式的示例！

html示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .table-tr {
            width: 1200px;
        }
        .table-td,.table-tdRowEnd,.table-tdLastRow,.table-tdLastRowEnd{
            float: left;
            width: 198px;
            height: 30px;
            line-height: 30px;
            border-style: solid;
        }
        .table-td {
            border-width: 1px 0px 0px 1px;
        }
        .table-tdRowEnd {
            border-width: 1px 1px 0px 1px;
        }
        .table-tdLastRow {
            border-width: 1px 0px 1px 1px;
        }
        .table-tdLastRowEnd {
            border-width: 1px 1px 1px 1px;
        }
    </style>
</head>
<body>
    <div class="table-tr" >
        <div class="table-td">姓名</div>
        <div class="table-td">年龄</div>
        <div class="table-td">电话</div>
        <div class="table-td">QQ号</div>
        <div class="table-td">邮箱地址</div>
        <div class="table-tdRowEnd">主页</div>
    </div>
 
    <div class="table-tr">
        <div class="table-td">小明</div>
        <div class="table-td">18</div>
        <div class="table-td">123456789</div>
        <div class="table-td">123456</div>
        <div class="table-td">admin@admin.com</div>
        <div class="table-tdRowEnd">feiniaomy.com</div>
    </div>
    <div class="table-tr" >
        <div class="table-td">小红</div>
        <div class="table-td">20</div>
        <div class="table-td">123456789</div>
        <div class="table-td">654321</div>
        <div class="table-td">xxxx@xx.com</div>
        <div class="table-tdRowEnd">baidu.com</div>
    </div>
    <div class="table-tr" >
        <div class="table-tdLastRow">小蓝</div>
        <div class="table-tdLastRow">20</div>
        <div class="table-tdLastRow">null</div>
        <div class="table-tdLastRow">null</div>
        <div class="table-tdLastRow"></div>
        <div class="table-tdLastRowEnd"></div>
    </div>
</body>
</html>

使用 CSS display 属性来画表格

使用 CSS 中的 display 属性，通过设置不同的值，完全可以制作出一个标准的表格式样试的图表！

css display 属性值参考

inline-table：显示成前后没有换行的表格
table：对应<table>标签，以表格方式显示。
table-row：对应<tr>标签。
table-row-group：对应<tbody>标签。
table-cell：对应<td>标签。
table-caption：对应<caption>标签。
table-column：对应<col>标签。
table-column-group：对应<colgroup>标签。
table-header-group：对应<theader>标签。
table-footer-group：对应<tfooter>标签。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul{margin:0;padding:0;list-style:none;}  
        .table{display:table;border-collapse:collapse;border:1px solid #ccc;}  
        .table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}  
        .table-column-group{display:table-column-group;}  
        .table-column{display:table-column;width:200px;}  
        .table-row-group{display:table-row-group;}  
        .table-row{display:table-row;}  
        .table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}  
        .table-cell{display:table-cell;padding:5px;border:1px solid #ccc;}  
        .table-header-group{display:table-header-group;background:#eee;font-weight:bold;}  
        .table-footer-group{display:table-footer-group;}
    </style>
</head>
<body>
    <div class="table">
        <div class="table-column-group">
            <div class="table-column"></div>
            <div class="table-column"></div>
            <div class="table-column"></div>
        </div>
        <div class="table-header-group">
            <ul class="table-row">
                <li class="table-cell">序号</li>
                <li class="table-cell">姓名</li>
                <li class="table-cell">年龄</li>
            </ul>
        </div>
        <div class="table-row-group">
            <ul class="table-row">
                <li class="table-cell">1</li>
                <li class="table-cell">小明</li>
                <li class="table-cell">19</li>
            </ul>
            <ul class="table-row">
                <li class="table-cell">2</li>
                <li class="table-cell">小红</li>
                <li class="table-cell">21</li>
            </ul>
            <ul class="table-row">
                <li class="table-cell">3</li>
                <li class="table-cell">小蓝</li>
                <li class="table-cell">26</li>
            </ul>
        </div>
        <div class="table-footer-group">
            <ul class="table-row">
                <li class="table-cell">底部</li>
                <li class="table-cell">底部</li>
                <li class="table-cell">底部</li>
            </ul>
        </div>
    </div>
</body>
</html>

以上就是DIV+CSS制作(table)表格的方法。人若在面临抉择而无法取舍的时候，应该选择自己尚未经验过的那一个。更多关于DIV+CSS制作(table)表格的方法请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章: