欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何搭建CSSdisplay屬性的table表格布局

如何搭建CSSdisplay屬性的table表格布局，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鄯善,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

項目改造中遇到DIV+CSS實現(xiàn)的table，新需求需要在表格使用單元格合并，網(wǎng)上調(diào)查返現(xiàn)CSS display:table實現(xiàn)的table表格，沒有單元格的屬性和樣式，經(jīng)過一番思考，曲折現(xiàn)實了單元格的合并，即采用正行嵌套一個單獨的display:table的DIV，然后在嵌套的表格DIV內(nèi)部通過控制行列數(shù)和行列的高度，實現(xiàn)單元格合并。個人建議全新實現(xiàn)使用<table> HTML標(biāo)簽即可

一、CSS display屬性的表格布局相關(guān)屬性的解釋：

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    此元素會作為一個表格標(biāo)題顯示（類似 <caption>）

二、示例代碼

1、普通表格

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  2. <!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>

運(yùn)行效果

如何搭建CSSdisplay屬性的table表格布局

2、列合并實現(xiàn)表格

實現(xiàn)思路：基于display:table的表格實現(xiàn)，沒有<table>的rowspan和colspan單元格合并的實現(xiàn)，所以曲折實現(xiàn)，將表格每行單獨嵌套一個獨立的表格，這樣在嵌套的獨立表格內(nèi)部，單元格合并就能通過控制嵌套表格的行數(shù)和列數(shù)以及單元格的寬高來實現(xiàn)

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!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>

運(yùn)行效果

如何搭建CSSdisplay屬性的table表格布局

3、行合并表格

行合并的實現(xiàn)思路：與列合并的實現(xiàn)思路類似，將有單元格合并的列單獨嵌套一個display為table的DIV，高度=單行高*單元格合并數(shù)目的倍數(shù)，同行的其他列同樣均單獨嵌套DIV，實例代碼如下

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  2. <!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" style="height:60px;">  
        <div class="table-td">  
            <div class="sub-table">  
                <div class="sub-table-tr">  
                    <div class="sub-table-td" style="width: 40%; border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    河南   
                                </div>  
                            </div>  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    江蘇   
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="sub-table-td" style="width: 30%;border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    37010   
                                </div>  
                            </div>  
                            <div class="sub-table-tr" style="height:50%;">  
                                <div class="sub-table-td" style="width: 100%; height:50%;">  
                                    70116   
                                </div>  
                            </div>  
                        </div>  
                       
                    </div>  
                       
                    <div class="sub-table-td" style="width: 30%;border: none;">  
                        <div class="sub-table">  
                            <div class="sub-table-tr">  
                                <div class="sub-table-td" style="width: 100%;">  
                                    8.4%   
                                </div>  
                            </div>  
                        </div>  
                    </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>

運(yùn)行效果：

如何搭建CSSdisplay屬性的table表格布局

看完上述內(nèi)容，你們掌握如何搭建CSSdisplay屬性的table表格布局的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：如何搭建CSSdisplay屬性的table表格布局
地址分享：http://chinadenli.net/article46/jpsphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制開發(fā)、企業(yè)建站、云服務(wù)器、營銷型網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)