Question

请查看以下代码

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

我正在尝试创建一个HTML表格，用户可以在其中滚动“正文”。但是我的尝试失败了，我得到的输出是低于。

enter image description here

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

我该如何解决这个问题？

Answer 1

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，而tbody将呈现其全高度。

我不会进入元素的绝对定位，因为如果你的表需要任何响应式样，这将是不可靠的。

http://jsfiddle.net/q9mmq2er/1/

Answer 2

这是我为改变它而改变的：

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

上设置了.text

Answer 3

我设法使用datatables解决了这个问题。以下是一个示例链接：http://datatables.net/examples/basic_init/scroll_y.html

无法使表体滚动

3 个答案: