gpt4 book ai didi

javascript - 当我用 bootstrap html 制作表格时,第一行与表格标题合并

转载 作者:行者123 更新时间:2023-11-28 02:02:42 26 4
gpt4 key购买 nike

我正在用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com