2. 程式人生 > >CSS屬性display:table的表格佈局的使用

CSS屬性display:table的表格佈局的使用

阿新 • • 發佈：2019-01-16

專案改造中遇到DIV+CSS實現的table，新需求需要在表格使用單元格合併，網上調查返現CSS display:table實現的table表格，沒有單元格的屬性和樣式，經過一番思考，曲折現實了單元格的合併，即採用正行巢狀一個單獨的display:table的DIV，然後在巢狀的表格DIV內部通過控制行列數和行列的高度，實現單元格合併。個人建議全新實現使用<table> HTML標籤即可

一、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>）

二、示例程式碼

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%;border: 1px solid gray; text-align: center;vertical-align: middle;}
 </style>
 </head>
 <body style="background: paleturquoise;">
     <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>

2、列合併實現表格

實現思路：基於display:table的表格實現，沒有<table>的rowspan和colspan單元格合併的實現，所以曲折實現，將表格每行單獨巢狀一個獨立的表格，這樣在巢狀的獨立表格內部，單元格合併就能通過控制巢狀表格的行數和列數以及單元格的寬高來實現

<!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  style="background: paleturquoise;">
 
 <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>

3、行合併表格

行合併的實現思路：與列合併的實現思路類似，將有單元格合併的列單獨巢狀一個display為table的DIV，高度=單行高*單元格合併數目的倍數，同行的其他列同樣均單獨巢狀DIV，例項程式碼如下

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* { margin:0; border:0; padding:0;}
			.table { display:table; background:#f00;width:500px;margin-left:200px; }
			.t_row { display:table-caption; border:1px solid #f00; height:100px; background:#00f;}
			.t_cell { display:table-cell; border:1px solid #f00; height:100px;  background:#0f0 }
		</style>
	</head>
	<body>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell" style="text-align: center;vertical-align: middle;">兩列</div>
		  <div class="t_cell">兩列</div>
		</div>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell">三列</div>
		  <div class="t_cell">三列</div>
		  <div class="t_cell">三列</div>
		</div>
		<div class="table">
		  <div class="t_row">一列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		  <div class="t_cell">四列</div>
		</div>
	</body>
</html>



相關推薦

CSS屬性display:table的表格佈局的使用

專案改造中遇到DIV+CSS實現的table，新需求需要在表格使用單元格合併，網上調查返現CSS display:table實現的table表格，沒有單元格的屬性和樣式，經過一番思考，曲折現實了單元格的合併，即採用正行巢狀一個單獨的display:table的DIV，然後

行內元素、塊元素和css屬性display

1.行內元素和塊元素特徵的區分 行內元素：相同的元素同行顯示，不會換行，除了圖片<img>，圖片按鈕input type='image'（感覺有點像是display:inline-block)，一般不能設定寬高(css裡display:inline)。 塊級元

CSS設定html table表格邊框樣式

之前就有些迷糊 table tr行 th表頭 td表格單元 th會預設加粗顯示 1.只對table標籤設定紅色邊框樣式 */ able-a table{border:1px solid #333} 2、對td設定邊框 表格中

CSS 中 display 的 table 屬性

table    此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 table-row-group    此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。

CSS display:table屬性用法解析

    本節和大家重點討論一下CSS display:table的使用，當IE8釋出時，它將支援很多新的CSS display屬性值，包括與表格相關的屬性值，CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。     CSS display:

CSS垂直水平居中，display:flex，佈局，文字屬性的一些零碎

1. body的height不可少，如body{height:100%}，否則子元素會不認，如果子元素的高直接以百分比寫的話，會不顯示。因為識別不出來。 寬度則不會，因為瀏覽器的寬度是固定的，高度會滾，不固定。 2. border-sizing其實是

利用display屬性寫出表格的布局樣式

title pad asc -m this 1.5 thead pop .text demo地址：http://codepen.io/tianzi77/pen/gpBzjy 元素結構： <h1>display構造的table小樣例

CSS屬性之display

css idt 列表 table lex list style footer 文檔 display屬性用來設置或檢索對象是否及如何顯示 默認值：對於HTML文檔來說，這取決於你使用的標簽 繼承性：不繼承 支持動畫：否 display是一個很重要的CSS屬性，設定的值會對一個

Day49：CSS屬性操作（文本、背景、邊框、列表、display、邊距）

tro 驗證 介紹 lec ica 基本 next eat 敬畏 一、CSS屬性操作 1、CSS text 文本顏色：color 顏色屬性被用來設置文字的顏色。 顏色是通過CSS最經常的指定： 十六進制值 - 如: ＃FF0000 一個RGB值 - 如: RGB(255,

今天我們來討論一下display和visibility兩個CSS屬性。

分享圖片 font images 渲染 大神 -s rdp abi css 在討論著兩個屬性之前我們先來看看HTML標簽的全局屬性。就是可以直接在HTML標簽上直接寫的屬性。 以下是菜鳥教程的截圖： 1.看以下第一個快捷鍵的屬性accesskey;設置的就不多說了。主要就

<display:table>常用屬性解釋

添加 tex 20px rip style屬性 wid 引用 jsp頁面 sce 1、官方網址：http://www.displaytag.org/1.2/displaytag/tagreference.html 2、應用舉例：<display:table name=

display,float,position的關系以及display=table,table-row,table-cell等屬性的使用

cin item style 不為 排列 con 渲染 cell position 1.先說display,float,position的關系display如果為none，float和position都失效；display不為空的時候，如果position為absolute

table表格用tbody新屬性獲取DOM元素

屬性獲取 elements class element cells [1] style nts bsp // alert(oTab.getElementsByTagName("tbody")[0] // .getEl

CSS的display屬性

CSS的display屬性佈局 1.display一般有inline，block，inline-block三個屬性 inline：使元素變為行內元素，擁有行內元素的特性，可以與其他元素共享一行，怒會獨佔一行；不能改變元素的height，width的值，大小由內容撐開；有padding

css3的display:table佈局

當IE8釋出時，它將支援很多新的CSS display屬性值，包括與表格相關的屬性值：table、table-row和table-cell，它也是最後一款支援這些屬性值的主流瀏覽器。  網頁元素應用上那些與表格相關的display屬性值後，能夠模仿出與表格相同的特性。 displa

微信小程式之獲取後臺動態資料Gird表格佈局display:grid

在工作中常用的就是flex佈局和grid佈局了，因為本人對grid佈局不是很熟練，這次主要是想模擬獲取後臺的動態資料來動態的設定表格佈局，算是一個簡單的嘗試，畢竟之前沒有用過。分享一下。 （一）實現效果 跟我上一篇文章微信小程式之獲取後臺動態資料表格佈局dis

display:table佈局筆記

一、佈局相關屬性 table：表格 table-row：表格行 table-column ：表格列 table-cell：表格格 二、表格佈局用法 <!DOCTYPE html> <html> <head> <ti

table佈局以及table表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display普通表格</title> <style type="text/css">

css列表list、表格table

列表list，無序列表ul，有序列表ol 1.列表項樣式list-style-type 無列表預設為dist實心圓，有序列表預設為decimal阿拉伯數字（前面不帶0） 其他無序列表常用none無樣式，circle空心圓，square實心方塊 有序列表常用decimal-leading-zero以0開

web前端練習5----css 的 display: flex 屬性

display:flex 是一種佈局方式。它即可以應用於容器中，也可以應用於行內元素。是W3C提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援。 Flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性