如何用不平衡的thead和tbody修复表

Question

我创建了一个带有修复表头的表。我使用这个简单的CSS来做到这一点。

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

但输出将是这样的;

我从ajax调用该表。所以这是表格代码;

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>";
    }

请帮我解决这个问题。

Answer 1

问题在你的CSS中 删除display:block;并尝试

Answer 2

从display:block;删除table-fixed tbody {}它将覆盖默认表格属性

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