Web响应式转换表头

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也变成了vertcal。但当浏览器变得更小时，整个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

考虑重新使用DIVs。表格和响应式设计并不是一个好的组合。

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