響應表的垂直和水平頭

enter image description here

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

我如何使它響應，從而使移動設備上的表如下所示：

Responsive

<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中做到這一點？我猜不是因爲我將需要複製垂直的標題

來源

2015-04-02 Cornwell

我嘗試了相反的方法：從移動佈局開始，我獲得了桌面佈局：http://codepen.io/anon/pen/qEwodb - 如果可以接受，我可以將它添加爲答案 – fcalderan 2015-04-02 10:49:01

看來您正在尋找一個CSS解決方案*重複*表，而不是響應。 – 2015-04-02 10:51:19

@FabrizioCalderan謝謝。這是一個有趣的方法。做它作爲答案。 – Cornwell 2015-04-02 11:00:02

更改的角度來看，用三個表開始就可以實現相反的效果，合併列時更大的視區是可用的，像這樣：

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

隨着這種方法信息冗餘一直保持儘可能低，因爲實際數據不會重複。

來源

2015-04-02 11:06:48 fcalderan

btw：如果我有兩張桌子，我怎麼能在桌面版本中使其中一個低於另一個：http://codepen.io/anon/pen/KwYRMd（請參閱評論） – Cornwell 2015-04-02 13:20:37

它不正如你所願，但檢查這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

來源

2015-04-02 11:03:27

響應表的垂直和水平頭

回答

相關問題