Menu
I am quite new in bootstrap, so I am sorry if my question is too simple.
I want to create a table that has a width as the parent container, fixed height and scroll bar if the table contains too many rows.
I have tried to do it like this:
<table class="table">
<tbody style="height: 80px; overflow-y: auto;">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>
It displays full table with full width but without scrolling and the height is bigger than I need.
Also I've tried to add display: block;:
<table class="table">
<tbody style="height: 80px; display: block; overflow-y: auto;">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>
In this case the scroll bar appeared but the width of tr-tag doesn't fit the container, it's much shorter.
I have also tried to specify width=100% to tr and td tags without a luck. How am I supposed to solve my task?
532
We can create such a table with either of the two approaches. By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.
The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.
Something like this, wrap your table in a div and then give height to wrapper instead of table.
.table-wrap {
height: 80px;
overflow-y: auto;
}<div class="table-wrap">
<table class="table">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</tbody>
</table>
</div>
tbody {
display:block;
height:200px;
overflow-y:scroll;
}
tr {
display:block;
}
th, td {
width:250px;
}<table>
<thead>
<tr>
<td>R.No</td>
<td>Name</td>
<td>Mark1</td>
<td>Mark1</td>
<td>Mark1</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test1</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>2</td>
<td>test2</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>3</td>
<td>test3</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>4</td>
<td>test4</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>5</td>
<td>test5</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>6</td>
<td>test6</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>7</td>
<td>test7</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>8</td>
<td>test8</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>9</td>
<td>test9</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
<tr>
<td>10</td>
<td>test10</td>
<td>81</td>
<td>52</td>
<td>62</td>
</tr>
</tbody>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
