具有垂直和水平标题的响应表 [英] Responsive table with vertical and horizontal headers

问题描述

我有以下表格（

CSS

  table {
 border-collapse：collapse; 
} 
 
 td，th {
 border：1px #ddd solid; 
} 
 table {
 margin：20px 0; 
} 
 td，th {
 padding：10px; 
} 
 
 @media all和（min-width：640px）{
 
表{
 float：left; 
} 
 
 table〜table td，
 table〜table th {border-left：0; } 
 
 table〜table tr：first-child th：first-child {display：none; } 
 table〜table tr：not（：first-child）th {display：none; } 
} 
  

使用这种方法，信息冗余保持尽可能低，因为实际数据不会重复。

I have the following table (jsFiddle):

    <table>
    <tr>
        <th></th>
        <th scope="col">BMW</th>
        <th scope="col">Audi</th>
        <th scope="col">Mercedes</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>1200</td>
        <td>1000</td>
        <td>1400</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>700</td>
        <td>750</td>
        <td>680</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>1230</td>
        <td>1400</td>
        <td>1100</td>
    </tr>
</table>

How do I make it responsive, so that in mobile devices the table will look like this:

    <table>
    <tr>
        <th></th>
        <th scope="col">BMW</th>
    </tr>
    <tr>
        <th scope="row">GPS</th>
        <td>1200</td>
    </tr>
    <tr>
        <th scope="row">Bluetooth</th>
        <td>700</td>
    </tr>
    <tr>
        <th scope="row">Sensors</th>
        <td>1230</td>
    </tr>
</table>

Is it possible to do this just in CSS? I'm guessing not since I will need to duplicate the vertical headers

解决方案

Changing the point of view and starting with three tables you can achieve the opposite effect, merging the columns when a larger viewport is available like so:

http://codepen.io/anon/pen/qEwodb

CSS

table {
  border-collapse: collapse;  
} 

td, th {
  border: 1px #ddd solid;
}
table {
  margin: 20px 0;
}
td, th {
  padding: 10px;
}

@media all and (min-width: 640px) {

   table  {
      float: left;
   }

   table ~ table td, 
   table ~ table th  { border-left: 0;  }

   table ~ table tr:first-child  th:first-child  { display: none; }
   table ~ table tr:not(:first-child) th  { display: none; }
}

With this approach the information redundancy has been kept as low as possible, since the actual data is not duplicated.

这篇关于具有垂直和水平标题的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！