How to fix table with unbalanced thead and tbody

Question

I created a table with fix table head. I use this simple CSS to do that.

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
 width: 97%;
 height: 340px;
 display:block;
 overflow:auto;
}

but the n the output will come like this;

I call the table from ajax. so here is the table code;

echo "<table class=\"table table-bordered table-fixed\">
    <thead>
        <tr>
        <th class=\"col-xs-1\">No</th>
        <th class=\"col-xs-2\">Name of Student</th>
        <th class=\"col-xs-1\">Nic No</th>
        <th class=\"col-xs-1\">Reg. No.</th>
        <th class=\"col-xs-1\">adm. date</th>
        <th class=\"col-xs-1\">room No</th>
        <th class=\"col-xs-3\">Address</th>
        <th class=\"col-xs-2\">Contact No.</th>
        </tr>
        </thead>
        <tbody>";
        $count = 1;
    while($row = $result->fetch_assoc()) {
    echo"
    <tr id=\"".$row["reg_no"]."\" onclick=\"Redirect(this.id)\">
    <td class=\"col-xs-1\">".$count."</td>
    <td class=\"col-xs-2\">".$row["name_initial"]."</td>
    <td class=\"col-xs-1\">".$row["nic"]."</td>
    <td class=\"col-xs-1\">".$row["reg_no"]."</td>
    <td class=\"col-xs-1\"></td>
    <td class=\"col-xs-1\"></td>
    <td class=\"col-xs-3\">".$row["resedential_adress"]."</td>
    <td class=\"col-xs-2\">".$row["contact_no"]."</td></tr>
    ";
    $count++;
    }
    echo "
        </tbody></table>";
    }

please Help me to fix this problem.

Answer 1

issue is in your css remove display:block; and try

Answer 2

Remove display:block; from table-fixed tbody {} It will override default table property

.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
 width: 97%;
 height: 340px;
 overflow:auto;
}