Alison
Reputation: 249
how to make the HTML table scroll
i am trying to make my table scroll verticaly but it does not work. Can someone please help me? here is my html code:
<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>
here is my .css code:
.scroll{
overflow:scroll;
}
Upvotes: 0
Views: 159
Answers (2)
blecaf
Reputation: 1645
For the table to scroll vertically you have to set a height for the container with the class "scroll". See sample below
.scroll{
overflow-y:scroll;
max-height: 100px;
max-width: 200px;
}
table {
width: 100%;
}<div class = scroll>
<table border="1">
<tbody>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
</tr>
</tbody>
</table>
</div> Upvotes: 0
ani_css
Reputation: 2126
set height property in your css file
#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>Upvotes: 1
Related Questions
- How do I make a table scrollable
- Make JTable cells in specific column scrollable
- how we perform scroll in table
- CSS - how can I add a vertical scroll in html table
- Scroll Table with Html/CSS
- How can I make a jsp table scrollable?
- How to make table scrollable in javascript
- How to create scrollable JTable
- Show scroll on html table
- JTable Autoscroll