zoukankan      html  css  js  c++  java
  • [CSS3] Responsive Table -- no more table

    When the screen size is small, we can use "no more table" solution. So instead of render table is row layout, we render it in column layout.

    Given the table below:

     <table>
          <thead>
            <tr>
              <th>Team</th>
              <th>1st</th>
              <th>2nd</th>
              <th>3rd</th>
              <th>4th</th>
              <th>5th</th>
              <th>6th</th>
              <th>7th</th>
              <th>8th</th>
              <th>9th</th>
              <th>Final</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-th="Team">Toronto</td>
              <td data-th="1st">0</td>
              <td data-th="2nd">0</td>
              <td data-th="3rd">0</td>
              <td data-th="4th">4</td>
              <td data-th="5th">0</td>
              <td data-th="6th">1</td>
              <td data-th="7th">0</td>
              <td data-th="8th">0</td>
              <td data-th="9th">0</td>
              <td data-th="Final">5</td>
            </tr>
            <tr>
              <td data-th="Team">San Francisco</td>
              <td data-th="1st">0</td>
              <td data-th="2nd">0</td>
              <td data-th="3rd">0</td>
              <td data-th="4th">4</td>
              <td data-th="5th">0</td>
              <td data-th="6th">0</td>
              <td data-th="7th">0</td>
              <td data-th="8th">0</td>
              <td data-th="9th">0</td>
              <td data-th="Final">4</td>
            </tr>
          </tbody>

    1. Reset table relatede element to block element:

    table, thead, tbody, th, td, tr {
              display: block;
            }

    2. Remove the thead:

            thead tr {
              position: absolute;
              top: -9999px;
              left: -9999px;
            }

    3. Position layout:

           /*The actually content will be on the right side*/
           td { 
              position: relative;
              padding-left: 50%; 
            }
            
           /*Using data-th to set the value and set position to left*/
            td:before { 
              position: absolute;
              left: 6px;
              content: attr(data-th);
              font-weight: bold;
            }    

    Full example:

  • 相关阅读:
    K近邻法
    感知机
    统计学习方法概论
    神经网络的学习 Neural Networks learing
    对线性回归、逻辑回归、各种回归的概念学习
    从零开始创建VUE项目
    Java中Log4j.properties配置文件详解
    Java中Log4j的入门实例
    Java中Log4j的基本使用方法说明
    C#与Java的RSA中的X509EncodedKeySpec、PKCS8EncodedKeySpec
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8455907.html
Copyright © 2011-2022 走看看