[CSS3] Responsive Table -- no more table

最新推荐文章于 2024-04-19 10:08:45 发布

转载最新推荐文章于 2024-04-19 10:08:45 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/8455907.html

本文介绍了一种在小屏幕设备上优化表格显示的方法：通过将传统的行布局改为列布局来提升用户体验。此方案涉及使用CSS对表格元素进行重新定义，并通过定位技巧使表格数据在垂直方向上展示。

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:

转载于:https://www.cnblogs.com/Answer1215/p/8455907.html