教學用css將div化成表格化處理

ihstar · 2021-02-22

一般來說，要將div表格化的css。主要是利用display內的對應屬性處理

table 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有分行符號。
table-row-group 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row 此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column 此元素會作為一個儲存格列顯示（類似 <col>）
table-cell 此元素會作為一個表格儲存格顯示（類似 <td> 和 <th>）
table-caption 此元素會作為一個表格標題顯示（類似 <caption>）

先記好如上的東西，下面再開始做教學。

ihstar · 2021-02-22

好的~~~再來就是看看對應的東西了。

如以下的程式碼然後其css定義如下

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display普通表格</title>
<style type="text/css">
.table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}
.table {display: table; width: 80%; border-collapse: collapse;}
.table-tr {display: table-row; height: 30px;}
.table-th {display: table-cell;font-weight: bold;height: 100%;border: 1px solid gray;text-align: center;vertical-align: middle;background-color:#E5E5E5;}
.table-td {display: table-cell; height: 100%;border: 1px solid gray; text-align: center;vertical-align: middle;}
</style>
</head>
<body>
    <div class="table">
        <div class="table-tr">
            <div class="table-th">縣市</div>
            <div class="table-th">GDP(億)</div>
            <div class="table-th">增長率</div>
        </div>
        <div class="table-tr">
            <div class="table-td">台北</div>
            <div class="table-td">72812</div>
            <div class="table-td">8.0%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">台南</div>
            <div class="table-td">37010</div>
            <div class="table-td">8.3%</div>
        </div>
        <div class="table-tr">
            <div class="table-td">台中</div>
            <div class="table-td">70116</div>
            <div class="table-td">8.5%</div>
        </div>
    </div>
</body>
</html>

其產生的樣式如

教學用css將div化成表格化處理

ihstar

管理員

ihstar

管理員

教學 用css將div化成表格化處理

ihstar

管理員

ihstar

管理員

教學用css將div化成表格化處理