我正在用 html 制作一个 Bootstrap 表。
我看到第一行与表头合并了。因此它看起来很差。 我尝试提供偏移量，但这似乎也不起作用。 我正在尝试制作一个固定的标题表，以便当我向下滚动时，标题保持固定。
下面是我的代码:你能告诉我我需要做些什么来修复它吗:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body{
}
.table-fixed{
width: 100
tbody{
height:900px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
}
}
}
}
th,td {
width:12.5%; /*100% number of Cloumn*/
}
</style>
</head>
<body>
<div class="container">
<table class="table table-fixed">
<thead style="position:fixed" data-offset-top="10">
<tr>
<th class="col-xs-1">First Name</th>
<th class="col-xs-1">Last Name</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr>
<tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr><tr>
<th class="col-xs-1">dd</th>
<th class="col-xs-1">sdffff</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
最佳答案
去掉这个:
<thead style="position:fixed" data-offset-top="10">
此外，不要使用 <tr><th>对于表行。仅用于标题。
这是一个完整的工作代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-fixed">
<thead style="position:fixed" data-offset-top="10">
<tr>
<th class="col-xs-1">First Name</th>
<th class="col-xs-1">Last Name</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-2">E-mail</th>
<th class="col-xs-1">E-mail</th>
<th class="col-xs-4">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr>
<tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr><tr>
<td class="col-xs-1">dd</td>
<td class="col-xs-1">sdffff</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-2">E-mail</td>
<td class="col-xs-1">E-mail</td>
<td class="col-xs-4">E-mail</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
关于javascript - 当我用 bootstrap html 制作表格时，第一行与表格标题合并，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49219775/