gpt4 book ai didi

java - 如何使 HTML 表格滚动

转载 作者:太空宇宙 更新时间:2023-11-04 08:45:47 25 4
gpt4 key购买 nike

我试图让我的表格垂直滚动,但它不起作用。有人可以帮帮我吗?这是我的 html 代码:

<div class = scroll>
<table border="1">
<tbody>
<tr>
<th>Number</th>
<th>Name</th>

</tr>
<tr>
<td>
5
</td>
<td>
Hello
</td>
</tbody>
</table>
</div>

这是我的 .css 代码:

.scroll{
overflow:scroll;

}

最佳答案

在你的 css 文件中设置 height 属性

#table-wrapper {
position: relative;
}

#table-scroll {
height: 120px;
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;
}
<div id="table-wrapper">
<div id="table-scroll">
<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>
<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, 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>

关于java - 如何使 HTML 表格滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43789419/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com