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:

  • 相关阅读:
    caffe报错:cudnn.hpp:86] Check failed: status == CUDNN_STATUS_SUCCESS (3 vs. 0) CUDNN_STATUS_BAD_PARAM 原因
    linux C++生成uuid
    linux出现tmp空间满的情况解决
    darknet集成遇到的问题以及解决方法
    机器学习实战-决策树
    机器学习实战-KNN
    Linux学习(二)
    Linux学习(一)
    shell编程(二)
    shell编程(一)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8455907.html
Copyright © 2011-2022 走看看