Html 无法使表体滚动_Html_Css_Html Table

Html 无法使表体滚动

html css

Html 无法使表体滚动,html,css,html-table,Html,Css,Html Table,请看下面的代码 <html> <head> <style> #table-wrapper { position:relative; } #table-scroll { height:150px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * {

请看下面的代码

<html>
    <head>
        <style>
            #table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
        </style>

    </head>
    <body>
        <div id="table-wrapper">
  <div style="height:200px; overflow:auto"> 
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
            <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
            <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
            <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
            <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
            <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
            <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
            <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
            <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
            <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
            <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
            <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
            <tr> <td>1, 11</td> <td>2, 11</td> <td>3, 11</td> </tr>
            <tr> <td>1, 12</td> <td>2, 12</td> <td>3, 12</td> </tr>
            <tr> <td>1, 13</td> <td>2, 13</td> <td>3, 13</td> </tr>
            <tr> <td>1, 14</td> <td>2, 14</td> <td>3, 14</td> </tr>
            <tr> <td>1, 15</td> <td>2, 15</td> <td>3, 15</td> </tr>
            <tr> <td>1, 16</td> <td>2, 16</td> <td>3, 16</td> </tr>
            <tr> <td>1, 17</td> <td>2, 17</td> <td>3, 17</td> </tr>
            <tr> <td>1, 18</td> <td>2, 18</td> <td>3, 18</td> </tr>
            <tr> <td>1, 19</td> <td>2, 19</td> <td>3, 19</td> </tr>
            <tr> <td>1, 20</td> <td>2, 20</td> <td>3, 20</td> </tr>
            <tr> <td>1, 21</td> <td>2, 21</td> <td>3, 21</td> </tr>
            <tr> <td>1, 22</td> <td>2, 22</td> <td>3, 22</td> </tr>
            <tr> <td>1, 23</td> <td>2, 23</td> <td>3, 23</td> </tr>
            <tr> <td>1, 24</td> <td>2, 24</td> <td>3, 24</td> </tr>
            <tr> <td>1, 25</td> <td>2, 25</td> <td>3, 25</td> </tr>
            <tr> <td>1, 26</td> <td>2, 26</td> <td>3, 26</td> </tr>
            <tr> <td>1, 27</td> <td>2, 27</td> <td>3, 27</td> </tr>
            <tr> <td>1, 28</td> <td>2, 28</td> <td>3, 28</td> </tr>
            <tr> <td>1, 29</td> <td>2, 29</td> <td>3, 29</td> </tr>
            <tr> <td>1, 30</td> <td>2, 30</td> <td>3, 30</td> </tr>
            <tr> <td>1, 31</td> <td>2, 31</td> <td>3, 31</td> </tr>
            <tr> <td>1, 32</td> <td>2, 32</td> <td>3, 32</td> </tr>
            <tr> <td>1, 33</td> <td>2, 33</td> <td>3, 33</td> </tr>
            <tr> <td>1, 34</td> <td>2, 34</td> <td>3, 34</td> </tr>
            <tr> <td>1, 35</td> <td>2, 35</td> <td>3, 35</td> </tr>
            <tr> <td>1, 36</td> <td>2, 36</td> <td>3, 36</td> </tr>
            <tr> <td>1, 37</td> <td>2, 37</td> <td>3, 37</td> </tr>
            <tr> <td>1, 38</td> <td>2, 38</td> <td>3, 38</td> </tr>
            <tr> <td>1, 39</td> <td>2, 39</td> <td>3, 39</td> </tr>
            <tr> <td>1, 40</td> <td>2, 40</td> <td>3, 40</td> </tr>
            <tr> <td>1, 41</td> <td>2, 41</td> <td>3, 41</td> </tr>
            <tr> <td>1, 42</td> <td>2, 42</td> <td>3, 42</td> </tr>
            <tr> <td>1, 43</td> <td>2, 43</td> <td>3, 43</td> </tr>
            <tr> <td>1, 44</td> <td>2, 44</td> <td>3, 44</td> </tr>
            <tr> <td>1, 45</td> <td>2, 45</td> <td>3, 45</td> </tr>
            <tr> <td>1, 46</td> <td>2, 46</td> <td>3, 46</td> </tr>
            <tr> <td>1, 47</td> <td>2, 47</td> <td>3, 47</td> </tr>
            <tr> <td>1, 48</td> <td>2, 48</td> <td>3, 48</td> </tr>
            <tr> <td>1, 49</td> <td>2, 49</td> <td>3, 49</td> </tr>
            <tr> <td>1, 50</td> <td>2, 50</td> <td>3, 50</td> </tr>
            <tr> <td>1, 51</td> <td>2, 51</td> <td>3, 51</td> </tr>
            <tr> <td>1, 52</td> <td>2, 52</td> <td>3, 52</td> </tr>
            <tr> <td>1, 53</td> <td>2, 53</td> <td>3, 53</td> </tr>
            <tr> <td>1, 54</td> <td>2, 54</td> <td>3, 54</td> </tr>
            <tr> <td>1, 55</td> <td>2, 55</td> <td>3, 55</td> </tr>
            <tr> <td>1, 56</td> <td>2, 56</td> <td>3, 56</td> </tr>
            <tr> <td>1, 57</td> <td>2, 57</td> <td>3, 57</td> </tr>
            <tr> <td>1, 58</td> <td>2, 58</td> <td>3, 58</td> </tr>
            <tr> <td>1, 59</td> <td>2, 59</td> <td>3, 59</td> </tr>
            <tr> <td>1, 60</td> <td>2, 60</td> <td>3, 60</td> </tr>
            <tr> <td>1, 61</td> <td>2, 61</td> <td>3, 61</td> </tr>
            <tr> <td>1, 62</td> <td>2, 62</td> <td>3, 62</td> </tr>
            <tr> <td>1, 63</td> <td>2, 63</td> <td>3, 63</td> </tr>
            <tr> <td>1, 64</td> <td>2, 64</td> <td>3, 64</td> </tr>
            <tr> <td>1, 65</td> <td>2, 65</td> <td>3, 65</td> </tr>
            <tr> <td>1, 66</td> <td>2, 66</td> <td>3, 66</td> </tr>
            <tr> <td>1, 67</td> <td>2, 67</td> <td>3, 67</td> </tr>
            <tr> <td>1, 68</td> <td>2, 68</td> <td>3, 68</td> </tr>
            <tr> <td>1, 69</td> <td>2, 69</td> <td>3, 69</td> </tr>
            <tr> <td>1, 70</td> <td>2, 70</td> <td>3, 70</td> </tr>
            <tr> <td>1, 71</td> <td>2, 71</td> <td>3, 71</td> </tr>
            <tr> <td>1, 72</td> <td>2, 72</td> <td>3, 72</td> </tr>
            <tr> <td>1, 73</td> <td>2, 73</td> <td>3, 73</td> </tr>
            <tr> <td>1, 74</td> <td>2, 74</td> <td>3, 74</td> </tr>
            <tr> <td>1, 75</td> <td>2, 75</td> <td>3, 75</td> </tr>
            <tr> <td>1, 76</td> <td>2, 76</td> <td>3, 76</td> </tr>
            <tr> <td>1, 77</td> <td>2, 77</td> <td>3, 77</td> </tr>
            <tr> <td>1, 78</td> <td>2, 78</td> <td>3, 78</td> </tr>
            <tr> <td>1, 79</td> <td>2, 79</td> <td>3, 79</td> </tr>
            <tr> <td>1, 80</td> <td>2, 80</td> <td>3, 80</td> </tr>
            <tr> <td>1, 81</td> <td>2, 81</td> <td>3, 81</td> </tr>
            <tr> <td>1, 82</td> <td>2, 82</td> <td>3, 82</td> </tr>
            <tr> <td>1, 83</td> <td>2, 83</td> <td>3, 83</td> </tr>
            <tr> <td>1, 84</td> <td>2, 84</td> <td>3, 84</td> </tr>
            <tr> <td>1, 85</td> <td>2, 85</td> <td>3, 85</td> </tr>
            <tr> <td>1, 86</td> <td>2, 86</td> <td>3, 86</td> </tr>
            <tr> <td>1, 87</td> <td>2, 87</td> <td>3, 87</td> </tr>
            <tr> <td>1, 88</td> <td>2, 88</td> <td>3, 88</td> </tr>
            <tr> <td>1, 89</td> <td>2, 89</td> <td>3, 89</td> </tr>
            <tr> <td>1, 90</td> <td>2, 90</td> <td>3, 90</td> </tr>
            <tr> <td>1, 91</td> <td>2, 91</td> <td>3, 91</td> </tr>
            <tr> <td>1, 92</td> <td>2, 92</td> <td>3, 92</td> </tr>
            <tr> <td>1, 93</td> <td>2, 93</td> <td>3, 93</td> </tr>
            <tr> <td>1, 94</td> <td>2, 94</td> <td>3, 94</td> </tr>
            <tr> <td>1, 95</td> <td>2, 95</td> <td>3, 95</td> </tr>
            <tr> <td>1, 96</td> <td>2, 96</td> <td>3, 96</td> </tr>
            <tr> <td>1, 97</td> <td>2, 97</td> <td>3, 97</td> </tr>
            <tr> <td>1, 98</td> <td>2, 98</td> <td>3, 98</td> </tr>
            <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>
    </body>
</html>


#表包装器{
位置：相对位置；
}
#表格卷轴{
高度：150像素；
溢出：自动；
边缘顶部：20px；
}
#表包装表{
宽度：100%；
}
#表包装表*{
背景：黄色；
颜色：黑色；
}
#表包装器表THAD th.text{
位置：绝对位置；
顶部：-20px；
z指数：2；
高度：20px；
宽度：35%；
边框：1px纯红；
}
A.
B
C
1, 0 2, 0 3, 0 
1, 1 2, 1 3, 1 
1, 2 2, 2 3, 2 
1, 3 2, 3 3, 3 
1, 4 2, 4 3, 4 
1, 5 2, 5 3, 5 
1, 6 2, 6 3, 6 
1, 7 2, 7 3, 7 
1, 8 2, 8 3, 8 
1, 9 2, 9 3, 9 
1, 10 2, 10 3, 10 
1, 11 2, 11 3, 11 
1, 12 2, 12 3, 12 
1, 13 2, 13 3, 13 
1, 14 2, 14 3, 14 
1, 15 2, 15 3, 15 
1, 16 2, 16 3, 16 
1, 17 2, 17 3, 17 
1, 18 2, 18 3, 18 
1, 19 2, 19 3, 19 
1, 20 2, 20 3, 20 
1, 21 2, 21 3, 21 
1, 22 2, 22 3, 22 
1, 23 2, 23 3, 23 
1, 24 2, 24 3, 24 
1, 25 2, 25 3, 25 
1, 26 2, 26 3, 26 
1, 27 2, 27 3, 27 
1, 28 2, 28 3, 28 
1, 29 2, 29 3, 29 
1, 30 2, 30 3, 30 
1, 31 2, 31 3, 31 
1, 32 2, 32 3, 32 
1, 33 2, 33 3, 33 
1, 34 2, 34 3, 34 
1, 35 2, 35 3, 35 
1, 36 2, 36 3, 36 
1, 37 2, 37 3, 37 
1, 38 2, 38 3, 38 
1, 39 2, 39 3, 39 
1, 40 2, 40 3, 40 
1, 41 2, 41 3, 41 
1, 42 2, 42 3, 42 
1, 43 2, 43 3, 43 
1, 44 2, 44 3, 44 
1, 45 2, 45 3, 45 
1, 46 2, 46 3, 46 
1, 47 2, 47 3, 47 
1, 48 2, 48 3, 48 
1, 49 2, 49 3, 49 
1, 50 2, 50 3, 50 
1, 51 2, 51 3, 51 
1, 52 2, 52 3, 52 
1, 53 2, 53 3, 53 
1, 54 2, 54 3, 54 
1, 55 2, 55 3, 55 
1, 56 2, 56 3, 56 
1, 57 2, 57 3, 57 
1, 58 2, 58 3, 58 
1, 59 2, 59 3, 59 
1, 60 2, 60 3, 60 
1, 61 2, 61 3, 61 
1, 62 2, 62 3, 62 
1, 63 2, 63 3, 63 
1, 64 2, 64 3, 64 
1, 65 2, 65 3, 65 
1, 66 2, 66 3, 66 
1, 67 2, 67 3, 67 
1, 68 2, 68 3, 68 
1, 69 2, 69 3, 69 
1, 70 2, 70 3, 70 
1, 71 2, 71 3, 71 
1, 72 2, 72 3, 72 
1, 73 2, 73 3, 73 
1, 74 2, 74 3, 74 
1, 75 2, 75 3, 75 
1, 76 2, 76 3, 76 
1, 77 2, 77 3, 77 
1, 78 2, 78 3, 78 
1, 79 2, 79 3, 79 
1, 80 2, 80 3, 80 
1, 81 2, 81 3, 81 
1, 82 2, 82 3, 82 
1, 83 2, 83 3, 83 
1, 84 2, 84 3, 84 
1, 85 2, 85 3, 85 
1, 86 2, 86 3, 86 
1, 87 2, 87 3, 87 
1, 88 2, 88 3, 88 
1, 89 2, 89 3, 89 
1, 90 2, 90 3, 90 
1, 91 2, 91 3, 91 
1, 92 2, 92 3, 92 
1, 93 2, 93 3, 93 
1, 94 2, 94 3, 94 
1, 95 2, 95 3, 95 
1, 96 2, 96 3, 96 
1, 97 2, 97 3, 97 
1, 98 2, 98 3, 98 
1, 99 2, 99 3, 99

我试图创建一个HTML表，用户可以在其中滚动“body”。然而，我的尝试失败了，我得到的输出如下

这很奇怪，表格的标题显示不正确，而且不对齐。我不想设置任何固定大小，因为用户可以随时调整浏览器的大小，谁知道呢

如何修复此问题？

以下是我为使其正常工作所做的更改：

#table-wrapper table thead th {
    position:relative;
}

#table-wrapper table thead th .text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 20px;
    width: 100%;
    border: 1px solid red;
}

问题是您设置了一个

top:-20px打开。文本
tbody, tr, td, th { display: inline-block; }
tbody { max-height: 150px; overflow-y: scroll; width: 100%; }
tr { width: 100%; } 
td, th { float: left; width: 33%; } 

添加这些内容应该是使tbody垂直滚动所需的全部内容。但是，这不适用于IE9，在IE9中，tbody将渲染其全高
我不会进入元素的绝对定位，因为如果您的桌子需要任何响应性样式，这将是不可靠的
我通过使用datatables
解决了这个问题。下面是一个示例链接：
Hi，你的意思是删除css的其余部分吗？你可能会把其他东西复杂化了。不确定CSS中有多少与更大的样式相关联，而不是与您尝试使滚动正常工作相关联。但是，是的，你不应该需要绝对定位来做这件事。试过了，没用。你能不能对我的代码做些编辑或者放一个JSFIDLE？它已经超出了布局。这是更新后包含CSS的图像。您好，这里，表格标题会滚动。这里有另一个答案，它在哪里？？？