带有垂直和水平标题的响应表

Question

我有下表（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>

如何使其响应，以便在移动设备中，表格如下所示：

    <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>

是否可以在CSS中执行此操作？我不猜，因为我需要复制垂直标题

Answer 1

更改视点并从三个表开始可以达到相反的效果，当有更大的视口可用时合并列：

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; }
}

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

Answer 2

  

它不是你想要的，但要检查一下。这是一个响应表。

<强> HTML

<table>
    <thead>
<tr>
     <th></th>
        <th scope="col">BMW</th>
        <th scope="col">Audi</th>
        <th scope="col">Mercedes</th>
</tr>
</thead>
  <tbody>
    <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>
      <tbody>
</table>

<强> CSS

table, td, th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0.5em;
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "BMW"; }
    td:nth-of-type(2):before { content: "Audi"; }
    td:nth-of-type(3):before { content: "Mercedes"; }
}

DEMO