如何解决div外面的表的CSS问题
我无法管理我的表的CSS,我尝试了不同的尝试,但没有成功。
如您所见,表格在我的div之外
我正在寻找的东西:
该表必须位于我的“日志” div中。
数据必须在一行中显示(我认为可以完成)<table class="blueTable table-striped table-bordered" id="blueTable" style="white-space:nowrap;width:100%;">
div“日志”必须位于屏幕中央(因为表格从右侧开始过多)
这里有一个带有数据样本的图像
我正在为表使用dataTable
我的CSS代码:
table.blueTable {
font-family: "Lucida Console",Monaco,monospace;
border: 4px solid #555252;
background-color: #E8E8E9;
text-align: center;
border-collapse: collapse;
}
table.blueTable td,table.blueTable th {
border: 1px solid #555555;
}
table.blueTable tbody td {
font-size: 12px;
}
table.blueTable thead {
background: #494949;
border-bottom: 4px solid #0D1F24;
}
table.blueTable thead th {
font-weight: bold;
color: #FFFFFF;
text-align: center;
border-left: 2px solid #050C0E;
}
table.blueTable thead th:first-child {
border-left: none;
}
table.blueTable tfoot td {
font-size: 13px;
}
table.blueTable tfoot .links {
text-align: right;
}
table.blueTable tfoot .links a {
display: inline-block;
background: #FFFFFF;
color: #398AA4;
padding: 2px 8px;
border-radius: 5px;
}
<main role="main" class="container">
<div class="card" style="width:100%">
<div class="card-header">
<h3 class='text-center'><i class="fab fa-reddit mr-2"></i>Logs</h3>
</div>
<div class="card-body pr-2 pl-2">
<table class="blueTable table-striped table-bordered" id="blueTable" style="white-space:nowrap;width:100%;">
<thead>
<tr>
<th>users_id</th>
<th>users_name</th>
<th>users_uid</th>
<th>users_email</th>
<th>roleid</th>
<th>isActive</th>
<th>created_at</th>
<th>updated_at</th>
<th>updated_by</th>
</tr>
</thead>
<tbody>
<?php
$getProfile = getProfile($conn,$_SESSION["users_id"]);
$allUsers = selectAllUsers($conn);
if ($allUsers) {
foreach ($allUsers as $key) {
?>
<tr>
<td class="block" style="width:auto"><?php echo $key["users_id"] ?></td>
<td class="block" style="width:auto"><?php echo $key["users_name"] ?></td>
<td class="block" style="width:auto"><?php echo $key["users_uid"] ?></td>
<td class="block" style="width:auto"><?php echo $key["users_email"] ?></td>
<td class="block" style="width:auto"><?php echo $key["roleid"] ?></td>
<td class="block" style="width:auto"><?php echo $key["isActive"] ?></td>
<td class="block" style="width:auto"><?php echo $key["created_at"] ?></td>
<td class="block" style="width:auto"><?php echo $key["updated_at"] ?></td>
<td class="block" style="width:auto"><?php echo $key["updated_by"] ?></td>
</tr>
<?php
}
}
?>
</tbody>
</tr>
</table>
</div>
</div>
</main>
<!-- Jquery script -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('#blueTable').dataTable({
"iDisplayLength": -1 // to display all rows
});
})
</script>
解决方法
要解决此问题,重点是使用class="container-fluid"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。