Html Table tbody not 100%

Question

I have a table but it is not 100% and the tbody size it is: 485x170px,

can someone help me to make this tbody 100%?

<thead> needs to be fixed as now.

I need have scrool and the tbody need to stay on the size of: height: calc(100vh - 513px); click to see the image

jsfiddle: https://jsfiddle.net/ab1Lsn0h/2/

css:

.staff table tbody {
  overflow-y: scroll;
  display: block;
  height: calc(100vh - 513px);
}

.staff tbody > tr {
  display: table;
  width: 100%;
}

html:

<div class="col-md-4">
  <div class="panel panel-default staff">
    <div class="panel-heading">test</div>
    <div class="panel-body">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Surname</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>
          <tr>
            <td>name 1</td>
            <td>name 2</td>
          </tr>

        </tbody>
      </table>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

Answer 1

You have to remove your display: block; and display: table; .

You are converting tr in table, this is wrong.