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

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

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

Web响应 - 转换表头

2 个答案: