html - Web 响应式 - 转换表格标题

Question

我有这张 table

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

当浏览器变小时，如预期的那样，表格的标题变为垂直和 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

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