Html Web响应-转换表头

我有这张桌子

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

---

考虑对div进行返工。表格和响应式设计不是一个好的组合。

我认为如果不为tbody提供固定宽度并覆盖特定视口的样式，您将无法实现您想要实现的目标。还考虑响应表解决方案，例如或响应设计。从长远来看，可以为您节省很多麻烦

tbody{

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

}

---

谢谢你，陈！是的，我试着在tbody的宽度上得到一些特定的PX，但它仍然是坏的。你有引导表的参考吗？我搜索了一下，但没有看到一个，但我看到了这个。这看起来像我所期望的，但不知何故，我不明白他们是如何设置CSS的。引导参考在链接上。你可以点击它@abcidd。你介意接受这个答案吗。如果这就是你要找的？只需单击左侧答案旁边的“勾号”？谢谢！这是一种积极的方式。

tbody{

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

}