How to create a full width table with fixed height and scrolling in Bootstrap?

user_3467698 0
Viewed 28141

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?

twitter-bootstrap css html
4 Answers

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>

user_116136320 
tbody {
  height: 80px;
  display: block;
  overflow-y: auto;
}

tr {
  display: block;
}

td {
  width: 250px;
}
user_116136320
Related