I am trying to create a bootstrap table in HTML, but I'm facing an issue where the first row merges with the table header, making it look unappealing. I've attempted to use offsets, but they don't seem to solve the problem. My goal is to have a fixed header table that remains in place when scrolling.
Below is the code I have written. Can you please provide guidance on how to fix this issue:
<!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>
// Additional rows left out for brevity
</tbody>
</table>
</div>
</body>
</html>