排除公告

嗨!遊客

歡迎您的到來喔!第一次來此嗎?

如有任何問題,還請到 建言/問題

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

本帖由 yoching2016-10-10 發佈。版面名稱:CSS

  1. yoching

    yoching 站務人員
    管理成員

    註冊:
    2016-10-01
    文章:
    35
    讚:
    3
    一般來說,要將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>)

    先記好如上的東西,下面再開始做教學。
     
  2. yoching

    yoching 站務人員
    管理成員

    註冊:
    2016-10-01
    文章:
    35
    讚:
    3
    好的~~~再來就是看看對應的東西了。

    如以下的程式碼然後其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>
    其產生的樣式如
    display普通表格.png
     
  3. yoching

    yoching 站務人員
    管理成員

    註冊:
    2016-10-01
    文章:
    35
    讚:
    3
    在來就是表格內不是有一些合併模式。
    也就是rowspan和colspan的合併表現。
    只是這在css內並無法很有效的結合處理。(因該說是本身就沒支援了。)

    於是就只能用額外思考的方式。

    思考的方式有很多點。一般最好的方式就是在相對的tr或是td。重新建立對應的table來處理。

    如以下的範例
    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%;}
    
    .sub-table {width: 100%;height: 100%;display: table;}
    .sub-table-tr {display: table-row; height: 100%;}
    .sub-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-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="table-th" style="width: 40%;">縣市</div>
                        <div class="table-th" style="width: 30%;">GDP(億)</div>
                        <div class="table-th" style="width: 30%;">增長率</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 40%;">台北</div>
                        <div class="sub-table-td" style="width: 30%;">72812</div>
                        <div class="sub-table-td" style="width: 30%;">8.0%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 40%;">台南</div>
                        <div class="sub-table-td" style="width: 30%;">37010</div>
                        <div class="sub-table-td" style="width: 30%;">8.3%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 40%;">台中</div>
                        <div class="sub-table-td" style="width: 30%;">70116</div>
                        <div class="sub-table-td" style="width: 30%;">8.5%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 70%;">各縣市GDP平均成長率</div>
                        <div class="sub-table-td" style="width: 30%;">8.26%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    以下就是呈現的方式
    display列合併表格.png

    這樣子是可以表現出來,不過如果是多重排版的話。就不是很容易了。
     
  4. yoching

    yoching 站務人員
    管理成員

    註冊:
    2016-10-01
    文章:
    35
    讚:
    3
    如上面的基本教學,如有問題或著其它比較好的方式,也可以提出來參考。
     

分享此頁面

正在載入...