在前端的網頁設計需求中,有時候需要使用表格來展示一些數據,但又不能使用 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:顯示成前后沒有換行的表格

  • 国产视频apptable:對應<table>標簽,以表格方式顯示。

  • table-row:對應<tr>標簽。

  • table-row-group:對應<tbody>標簽。

  • 国产视频apptable-cell:對應<td>標簽。

  • 国产视频apptable-caption:對應<caption>標簽。

  • 国产视频apptable-column:對應<col>標簽。

  • table-column-group:對應<colgroup>標簽。

  • 国产视频apptable-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>