【发布时间】：2018-03-11 12:02:52
【问题描述】：
我正在用 html 制作引导表。
我看到第一行与表头合并。因此，它看起来很差。 我尝试给予补偿，但这似乎也不起作用。 我正在尝试制作一个固定的标题表，以便当我向下滚动时，标题保持固定。
下面是我的代码：你能告诉我我需要做什么来修复它吗：
<!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>
【问题讨论】：
-
您的 CSS 代码无效，您使用的是 SASS/SCSS 语法而不是 CSS。例如，倒数第二个规则应写为
thead tr th { float: left; }。
标签： javascript html css twitter-bootstrap bootstrap-4