無法使表體滾動

請看看下面的代碼無法使表體滾動

<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

這是奇怪，表的標題顯示不正確，他們是不對齊的。我不想設置任何固定大小，因爲用戶可以隨時調整瀏覽器的大小，誰知道呢？

我該如何解決這個問題？

來源

2015-02-10 Yohan Weerasinghe

還有另一個答案在這裏，它在哪裏？ – 2015-02-11 10:27:39

我設法用datatables來解決這個煩惱。這裏是一個例子的鏈接：http://datatables.net/examples/basic_init/scroll_y.html

來源

2015-02-13 16:18:44

這是我改變，使其工作：

#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

來源

2015-02-10 16:50:17 Skoua

嗨，在這裏，表頭不滾動。 – 2015-02-10 16:55:24

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/

來源

2015-02-10 16:50:39

嗨，你的意思是刪除其餘的CSS？ – 2015-02-10 16:52:11

你可能與其他東西過於複雜的事情。不知道有多少CSS與較大的樣式相關，而您嘗試使滾動工作。但是，是的，你不應該需要絕對定位來做到這一點。 – 2015-02-10 16:53:13

嘗試過，沒有工作。你可以請我做一些編輯我的代碼或放一個jsfiddle？ – 2015-02-10 16:54:02

無法使表體滾動

回答

相關問題