響應表的垂直和水平頭

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

它不正如你所願，但檢查這out.IT是一個響應表。

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