gpt4 book ai didi

javascript - 具有水平滚动的数据表固定标题

转载 作者:行者123 更新时间:2023-11-28 00:11:57 24 4
gpt4 key购买 nike

我有一个数据表,我想实现固定标题和水平滚动。固定标题和水平滚动各自独立工作,但一旦我尝试同时使用两者,它就不起作用。

没有滚动条我有固定标题,没有固定标题我有滚动条。对于两者,我还有没有固定标题的滚动条。我怎样才能同时使用两者。我读到它们是不兼容的功能,但必须有一个合理的方法来解决这个问题,即使用 HTML、CSS 和/或 JS。非常感谢此处的任何帮助!

https://jsfiddle.net/Ntuttle3/jrz5npLb/9/

HTML

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
</head>

<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"> <img src="#" height="30" width="30" class="d-inline-block align-top"> Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Office</a> </li>
</ul>
</div>
</nav>
</header>
<main>
<br>
<br>

<table id="dtBasicExample">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
<th>Header7</th>
<th>Header8</th>
<th>Header9</th>
<th>Header10</th>
<th>Header11</th>
<th>Header12</th>
<th>Header13</th>
<th>Header14</th>
<th>Header15</th>
<th>Header16</th>
<th>Header17</th>
<th>Header18</th>
<th>Header19</th>
<th>Header20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Column 16</td>
<td>Column 17</td>
<td>Column 18</td>
<td>Column 19</td>
<td>Column 20</td>
</tr>
</tbody>
</table>

<br>
</main>
<div class="footer">
<div class="container">
<div id="footer-center">Copyright © My Comapany
<div id="footer-right"><a href="#" class="text-muted">Back to top</a></div>
<div style="clear: both"></div>
</div>
</div>
</div>
</body>
</html>

CSS

html,
body {
height: 100%;
margin: 0;
}

body {
display: flex;
flex-direction: column;
}

.footer {
background-color: #003366;
text-align: center;
color: white;
height: 30px;
}

#footer-center {
color: white;
}

#footer-right {
float: right;
color: blue;
}

.navbar-nav li:hover>.dropdown-menu {
display: block;
content: none;
}

.dropdown-menu.show {
background-color: #f5f6f7;
}

header {
height: 75px;
background: red;
left: 0;
right: 0;
width: 100%;
position: fixed;
z-index: 500;
}

nav {
background-color: #262626;
height: 60px;
width: 100%;
position: fixed;
top: 0;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
}

thead tr th,
tbody tr td {
width: 150 px;
min-width: 150 px;
max-width: 150 px;
}

table th {
position: -webkit-sticky;
background: #fff;
text-align: center;
}

table {
font-size: 14px;
}

main {
margin: auto;
flex: 1;
padding-top: 75;
margin: 0 auto;
width: 90%;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

td {
text-align: center;
}

table tr td:first-child {
text-align: left;
padding-left: 25px;
}

table.GeneratedTable {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-color: #ffcc00;
border-style: solid;
color: #000000;
}

table.GeneratedTable td,
table.GeneratedTable th {
border-color: #ffcc00;
border-style: solid;
padding: 10px;
}

table.GeneratedTable thead {
background-color: #ffcc00;
}

Javascript

  $(document).ready(function() {
$('#dtBasicExample').DataTable({
"searching": true,
"paging": true,
"pageLength": 50,
"info": false,
"scrollX": true,
"fixedHeader": {
"headerOffset": 75
}
})
});

最佳答案

根据 the documentation 目前这是不可能的:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

他们还提供了一个 feature compatibility table ,这应该可以帮助您确定它是否满足任何其他需求,或者这是否会破坏交易并且不适合您。

关于javascript - 具有水平滚动的数据表固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55343847/

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