Html JQuery DataTable响应行为不适用于Bootstrap 4 accordion中的表
我有一个自助式手风琴，每个部分都有一张桌子。这些表具有JQuery DataTables扩展，并且设置为响应。在我将表格放入手风琴之前，表格的行为是响应性的（即图标显示为展开/折叠行，表格大小随窗口大小调整）。但在手风琴内部移动后，桌子溢出并从屏幕上消失，而不是响应。到目前为止，我已经尝试了我找到的每一个解决方案，但似乎没有任何效果。任何帮助都将不胜感激 代码如下：Html JQuery DataTable响应行为不适用于Bootstrap 4 accordion中的表,html,jquery,datatables,responsive,Html,Jquery,Datatables,Responsive,我有一个自助式手风琴，每个部分都有一张桌子。这些表具有JQuery DataTables扩展，并且设置为响应。在我将表格放入手风琴之前，表格的行为是响应性的（即图标显示为展开/折叠行，表格大小随窗口大小调整）。但在手风琴内部移动后，桌子溢出并从屏幕上消失，而不是响应。到目前为止，我已经尝试了我找到的每一个解决方案，但似乎没有任何效果。任何帮助都将不胜感激 代码如下： <!DOCTYPE html> <html lang="en"> <head&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css" type="text/css" rel="stylesheet" />
<style>
body {
padding-top: 0px;
padding-bottom: 20px;
}
/*For centered headings*/
.heading-center {
margin-top: 3vh;
text-align: center;
font-weight: bold;
}
/*Change color of focused elements' border*/
.form-control:focus {
border-color: #ffcc24 !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 204, 36, 0.8) !important;
outline: 0 none !important;
}
.form-control {
border: none !important;
}
/*Override extra link decorations on navbar and home quick actions*/
nav > ul > li > a:hover {
text-decoration-line: none;
}
nav > ul > li > ul > li > a:hover {
text-decoration-line: none;
}
.quick-actions a:hover {
text-decoration-line: none;
}
/*Change background color of hovered table row*/
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: #ffcc24;
cursor: pointer;
}
.table-text-center > tbody > tr > td,
.table-text-center > thead > tr > th {
text-align: center;
}
/*Override boostrap class attributes.*/
.table .table-title th{
background-color: black;
}
.table .table-title h1 {
color: white;
}
.table .table-col-titles th{
background-color: black;
color: white;
}
/*.table {
border-collapse: separate;
}*/
/*Sticky table header*/
.sticky-title th{
position: -webkit-sticky;
position: sticky;
top: 60px;
}
.sticky-col-titles th {
position: -webkit-sticky;
position: sticky;
top: 150px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/*Padding the nav bar*/
.padded-nav {
padding: 10px;
}
main {
margin-top: 40px;
width: 100%;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid black;
margin: 1em 0;
padding: 0;
}
.table {
width: 100% !important;
}
thead {
color: white;
background-color: black;
}
.descr-table {
width: 80%;
margin-left: auto;
margin-right: auto;
min-width: 250px;
}
.descr-table th {
width: 30%;
background-color: #ffcc24;
border: 1px solid black;
}
.descr-table td {
width: 70%;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<main class="container-fluid">
<h1 class="text-center">CUSTOMER DETAILS</h1>
<table class="descr-table">
<tr>
<th>Customer ID</th>
<td>98789098</td>
</tr>
<tr>
<th>Customer Name</th>
<td>Business, LLC</td>
</tr>
</table>
<hr />
<div class="accordion" id="customerDetailsAccordion">
<div id="poTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#poTableWrapper" aria-expanded="false" aria-controls="poTableWrapper">
<h2 class="text-center">PURCHASE ORDERS</h2>
</div>
<div id="poTableWrapper" class="collapse container-fluid" aria-labelledby="poTableHeader" data-parent="#customerDetailsAccordion">
<table id="poTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>$1000.00</td>
<td>$200.00</td>
<td>$100.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>$1000.00</td>
<td>$200.00</td>
<td>$100.00</td>
</tr>
<tr>
<td>234211</td>
<td>Products/Services P.O.</td>
<td>USD</td>
<td>11/20/2020</td>
<td>12/20/2021</td>
<td>$1000.00</td>
<td>$200.00</td>
<td>$100.00</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div id="userTableHeader" class="collapsed" type="button" data-toggle="collapse" data-target="#userTableWrapper" aria-expanded="false" aria-controls="userTableWrapper">
<h2 class="text-center">USERS</h2>
</div>
<div id="userTableWrapper" class="collapse" aria-labelledby="userTableHeader" data-parent="#customerDetailsAccordion">
<table id="usersTable" class="table table-hover table-striped table-text-center">
<thead></thead>
<tbody>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
<tr>
<td>Mike Smith</td>
<td>smithm01</td>
<td>smithm01@tqs.com</td>
</tr>
</tbody>
</table>
</div>
<hr />
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script defer src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script defer>
$("document").ready(function () {
$("#poTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "PO #"
},
{
title: "Service Type"
},
{
title: "Currency"
},
{
title: "Issue Date"
},
{
title: "Expiration Date"
},
{
title: "Total Amount"
},
{
title: "Threshold Amount"
},
{
title: "Remaining Amount"
}
]
});
$("#usersTable").DataTable({
select: false,
responsive: true,
columns: [
{
title: "Name"
},
{
title: "Username"
},
{
title: "Email"
}
]
});
//Redirect to po details page except when expand/collapse icon clicked.
$('#poTable td').click(function () {
if ($(this).attr('class') !== 'sorting_1')
{
location.href = '#';
}
});
});
</script>
</body>
</html>
文件
身体{
填充顶部：0px；
垫底：20px；
}
/*对于居中标题*/
.航向中心{
边际上限：3vh；
文本对齐：居中；
字体大小：粗体；
}
/*更改聚焦元素边框的颜色*/
.窗体控件：焦点{
边框颜色：#ffcc24！重要；
方框阴影：0 1px 1px rgba（0,0,0,0.075）插图，0 0 8px rgba（255,204,36,0.8）！重要信息；
大纲：0无！重要；
}
.表格管制{
边界：没有！重要；
}
/*覆盖导航栏和主页快速操作上的额外链接装饰*/
导航>超视距>视距>a:悬停{
文字装饰线：无；
}
导航>超视距>超视距>超视距>超视距：悬停{
文字装饰线：无；
}
.快速行动a:悬停{
文字装饰线：无；
}
/*更改悬停表格行的背景色*/
.table hover t车身tr:hover td.table hover t车身tr:hover th{
背景色：#ffcc24；
光标：指针；
}
.表格文本中心>T正文>tr>td，
.表格文本中心>主题>主题>主题{
文本对齐：居中；
}
/*重写boostrap类属性*/
.表格.表格标题th{
背景色：黑色；
}
.表格.表格标题h1{
颜色：白色；
}
.表.表列标题th{
背景色：黑色；
颜色：白色；
}
/*.桌子{
边界塌陷：分离；
}*/
/*粘性表头*/
.粘性标题th{
职位：-网络工具包粘性；
位置：粘性；
顶部：60px；
}
.th{
职位：-网络工具包粘性；
位置：粘性；
顶部：150px；
}
/*设置填充以防止内容触及边缘*/
.正文内容{
左侧填充：15px；
右侧填充：15px；
}
/*设置表单输入元素的宽度，因为默认情况下它们是100%宽的*/
输入，
选择，
文本区{
最大宽度：280px；
}
/*填充导航栏*/
.加垫导航{
填充：10px；
}
主要{
边缘顶端：40px；
宽度：100%；
}
人力资源{
显示：块；
高度：1px；
边界：0；
边框顶部：1件纯黑；
利润率：1米0；
填充：0；
}
.桌子{
宽度：100%！重要；
}
泰德{
颜色：白色；
背景色：黑色；
}
.描述表{
宽度：80%；
左边距：自动；
右边距：自动；
最小宽度：250px；
}
.descr表th{
宽度：30%；
背景色：#ffcc24；
边框：1px纯黑；
}
.descr表格td{
宽度：70%；
边框：1px纯黑；
文本对齐：居中；
}
客户详细信息
客户ID
98789098
客户名称
商业有限责任公司
采购订单
234211
产品/服务采购订单。
美元
11/20/2020
12/20/2021
$1000.00
$200.00
$100.00
234211
产品/服务采购订单。
美元
11/20/2020
12/20/2021
$1000.00
$200.00
$100.00
234211
产品/服务采购订单。
美元
11/20/2020
12/20/2021
$1000.00
$200.00
$100.00
使用者
迈克·史密斯
史密斯M01
smithm01@tqs.com
迈克·史密斯
史密斯M01
smithm01@tqs.com
迈克·史密斯
史密斯M01
smithm01@tqs.com
const poNode = document.getElementById('poTableWrapper');
const usersNode = document.getElementById('usersTable');
const config = {
attributes: true
};
const poCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#poTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const usersCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
$("#usersTable").DataTable().columns.adjust().responsive.recalc();
}
}
};
const poObserver = new MutationObserver(poCallback);
const usersObserver = new MutationObserver(usersCallback);
poObserver.observe(poNode, config);
usersObserver.observe(usersNode, config);