網絡響應 - 轉換表頭

Question

我有這個表

<table border="1"> 

<thead><tr> 
    <th>Index</th> 
    <th>Value</th> 
    <th>Change</th> 
    <th>Change %</th> 
    <th>Year High</th> 
    <th>Year Low</th> 
    <th>Daily Low</th> 
    <th>Daily High</th> 
    <th>Turnover €(Mil.)</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>ABC® Overall</td> 
    <td>2,725.99</td> 
    <td>-15.30</td> 
    <td>-0.56%</td> 
    <td>3,037.89</td> 
    <td>2,333.35</td> 
    <td>2,712.84</td> 
    <td>2,743.31</td> 
    <td>24.00</td> 
</tr> 
<tr> 
    <td>ABC® Financial</td> 
    <td>130.77</td> 
    <td>-3.24</td> 
    <td>-2.42%</td> 
    <td>493.83</td> 
    <td>101.54</td> 
    <td>130.43</td> 
    <td>136.14</td> 
    <td>2.76</td> 
</tr> 
<tr> 
    <td>ABC® General</td> 
    <td>3,751.79</td> 
    <td>-17.49</td> 
    <td>-0.46%</td> 
    <td>4,146.84</td> 
    <td>3,188.68</td> 
    <td>3,731.15</td> 
    <td>3,770.88</td> 
    <td>21.24</td> 
</tr> 
<tr> 
    <td>ABC® Small Cap.</td> 
    <td>1,661.94</td> 
    <td>3.76</td> 
    <td>0.23%</td> 
    <td>2,175.60</td> 
    <td>1,633.21</td> 
    <td>1,643.92</td> 
    <td>1,661.94</td> 
    <td>0.20</td> 
</tr> 
</tbody></table> 

當瀏覽器變得更小，符合市場預期，該表的頭轉向vertcal和tbody轉彎了。但是，當瀏覽器變得更小時，整個tbody被打破，每個<tr>...</tr>也被打破。

當瀏覽器變小時，我怎麼能得到tbody和每個<tr>...</tr>？

此外，在CSS中，我嘗試在瀏覽器變小時設置tbody的導航條，但它不起作用！任何想法？

CSS

table{ 
    display:block; 
    padding: 0px; 
    position:relative; 
    border-spacing:0; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

thead{ 
    display: block; 
    float: left; 
    clear:both; 
    background-color:#3399ff; 

} 
tbody{ 

    white-space:nowrap; 
    display: block; 
    overflow-x: auto; 
    position: relative; 
    width: 100%; 


} 
tbody tr { 
    float:left; 
    min-width:auto; 
    text-wrap:yes; 
    display:inline-block 
} 
th, td{ 
    display:block; 
    padding: 5px; 
    margin: 0px; 
} 

JSFIDDLE

Answer 1

考慮與資料覈實返工。表格和響應式設計不是一個好的組合。

Answer 2

我不認爲你能夠實現你正在嘗試做的事情，而無需給tbody設置固定寬度併爲特定視口重寫樣式。對於響應式設計，請考慮響應式表格解決方案，例如bootstrap或zurb。從長遠來看爲您節省很多麻煩。

tbody{ 

    white-space:nowrap; 
    display: block; 
    overflow-x: auto; 
    position: relative; 
    width:500px; /*Change this according to the requirements for specific viewports */ 

} 

UPDATED JSFIDDLE