2. 程式人生 > >CSS3 table — 自適應佈局表格

CSS3 table — 自適應佈局表格

阿新 • • 發佈：2019-02-01 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>演示：純CSS實現自適應佈局表格</title>
    <style type="text/css">
  body {
    font-family: arial;
        background:#fff;
  }

  table {
    border: 1px solid #ccc;
    width: 80%;
    margin:0;
    padding:0;
    border-collapse
 
: collapse;
    border-spacing: 0;
    margin: 0 auto;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600
 
px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1
 
px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

.note{max-width: 80%; margin: 0 auto;}
    </style>

</head>
<body>

<div class="note">
<h1>演示：純CSS實現自適應佈局表格（縮小顯示區域看下）</h1>

<p>調整頁面寬度，或者在不同螢幕尺寸的裝置上(PC，手機)嘗試瀏覽器本頁，你會發現下面的表格呈現出自適應佈局特徵，能夠自動的使用不同的螢幕尺寸，資料的表現不會因為螢幕大小變化而變得不合適。</p>

</div>

<table>
  <thead>
    <tr>
      <th>支付</th>
      <th>日期</th>
      <th>金額</th>
      <th>週期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="支付">支付 #1</td>
      <td data-label="日期">02/01/2015</td>
      <td data-label="金額">￥2,311</td>
      <td data-label="週期">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="支付">支付 #2</td>
      <td data-label="日期">03/01/2015</td>
      <td data-label="金額">￥3,211</td>
      <td data-label="週期">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>

</body>
</html>

相關推薦

CSS3 table — 自適應佈局表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>演示：純CSS實現自適應佈局表格</title> &l

css3 calc()自適應佈局屬性 ---瀏覽器版本相容性的問題

我們想要實現頁面自適應佈局時，通常因為margin的存在，而比較麻煩；有時候想要實現寬度自適應的輸入框時，也因為padding或margin的存在，而相當繁瑣，同時由於瀏覽器相容性而導致最終效果不一致。css3新新增屬性box-sizing，在一定程度上解決了上面的問題，

css3 calc()自適應佈局屬性

我們想要實現頁面自適應佈局時，通常因為margin的存在，而比較麻煩；有時候想要實現寬度自適應的輸入框時，也因為padding或margin的存在，而相當繁瑣，同時由於瀏覽器相容性而導致最終效果不一致。css3新新增屬性box-sizing，在一定程度上解決了上面的問題，

div 寫table 自適應表格

<div style="text-align: center;display: flex; justify-content: space-between;padding-top:1%"> <div class="case_summary_div"> <di

CSS3 calc函式+position+float實現左右兩欄固定，中間欄自適應佈局且中間欄優先載入

先上結果圖 頁面縮小時 程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

css3彈性佈局中的兩列寬度自適應佈局和兩列右列寬度自適應佈局

一    佈局可以有float,和position（絕對定位和相對定位）來設定，在這裡就不多介紹，而是來介紹其他的佈局型別   二 <1>一列固定寬度。。           ***想必這個大家都知道的直接給這個div的css中設定寬度和長度就可以了。   &l

關於頁面的多種自適應佈局——三列布局

簡單結構1，列表在前，更多列表在中間，內容在後 1 <style type="text/css"> 2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:

移動端自適應佈局方案-rem佈局.md

Rem是CSS3新引入的單位，通過動態設定根元素html的font-size，等比縮放元素大小以達到適應移動裝置的目的。 在W3C官網上是這樣描述rem的——“font size of the root element” 。 當我們指定一個元素的font-size為2

笨鳥兒 靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout） 即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

[UWP]使用AdaptiveTrigger實現自適應佈局

原文: [UWP]使用AdaptiveTrigger實現自適應佈局 這篇部落格將介紹如何在UWP開發中使用AdaptiveTrigger實現自適應佈局。 場景1：窗體寬度大於800時，窗體背景色為綠色，窗體在0到800之間為藍色。 XAML Code: <Grid x:Name="La

Android提高第十五篇之ListView自適應實現表格

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

聖盃+雙飛翼 自適應佈局

一、聖盃佈局 左右固定200px，中間自適應 左右兩個div左右浮動，中間div寫到前面 通過margin-left：-100%；來調整到同一行 父容器新增左右padding，左右div相對定位 詳細程式碼如下： &lt;!doctype html&gt; &

qt顯示圖片並且實現自適應佈局

對話方塊開啟圖片 QString fileName = QFileDialog::getOpenFileName(this, tr("open iamge"),//對話方塊名稱 ".",//預設開啟檔案位置“.”檔案目錄"/"根目錄 tr("image files(*

css常用左側固定右側自適應佈局兩欄佈局的方法

話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

自適應佈局解析

自適應的佈局是開發中常用的，也是常考的。 首先說到自適應就不得不說彈性佈局flex，flex不多贅述，自行去百度，但很多文件對於flex的介紹不詳細。下面是對於flex佈局文件的補充： flex屬性 是 flex-grow、flex-shrink、flex-basis的縮

移動端自適應佈局解決方案：rem佈局

      之前寫了一篇rem佈局的文章，今天拿出來發現已經過時了。於是再來寫一遍！        2018.10.24更新       首先在html裡面設定一下視口： <meta

小標題兩側加橫線或背景圖片自適應佈局實現技巧

<div class="tit-bar"> <div class="deg">滿意度調查</div> </div> .tit-bar .deg { width:100%; font-size: 16px; color: #555;

常用一屏自適應佈局（一）

         在web開發的時候，有時候會遇見一些自適應佈局，而且是一屏內自適應，特別是寫一些後臺管理系統介面，都是一屏顯示，而且顯示內容佈局有固定的，也有不固定的，如果用css3的彈性盒子來解決的話，當然會很容易，但是呢，css3的彈性盒子在PC端的支

使用css實現三欄自適應佈局

現象： 兩邊兩欄固定寬度，中間為自適應。 思路： 1.絕對定位法： 父元素相對定位，左右兩欄使用絕對定位,中間用margin相對父元素的邊距撐開。 缺點：  子元素使用絕對定位，父元素無法被撐開。會出現如下情況： 2.浮動法：  H

CSS自適應佈局（左右固定中間自適應或者右側固定左側自適應）

CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應) 經常在工作中或者在面試中會碰到這樣的問題，比如我想要個佈局 右側固定寬度 左側自適應 或者 三列布局 左右固定 中間自適應的問題。 下面我們分別來學習下，當然我也是總結下而已，有如以下方法： 一：