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:

  • 相关阅读:
    批量修改图片尺寸
    批量修改文件名
    C++ 字符串的编码
    Hanoi问题
    农夫过河问题
    遍历文件夹中所有图片
    仿射变换和透射变换
    程序局部性原理
    14年年底的学习计划
    linux之Vim使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8455907.html
Copyright © 2011-2022 走看看