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

Question

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?

Answer 1

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>

Answer 2

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>