CSS-数据表的样式不正确
我正在主题中创建前端布局。
但是，数据表的样式不正确。它应该如下所示：
在我看来，我的CSS有点重叠了。
请在下面找到我的最低可行示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/layout.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/components.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/colors.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/jquery.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/bootstrap.bundle.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/loaders/blockui.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/slinky.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/ripple.min.js"></script>
<!-- /core JS files -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/tables/datatables/datatables.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/tables/datatables/extensions/responsive.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/forms/selects/select2.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/forms/styling/uniform.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/notifications/pnotify.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/forms/selects/bootstrap_multiselect.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/widgets.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/touch.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/slider_pips.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/forms/styling/switchery.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/demo_pages/datatables_responsive.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/demo_pages/form_multiselect.js"></script>
<!-- /theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/js/app.js"></script>
<!-- /theme JS files -->
</head>
<body class="navbar-md-md-top">
<!-- Multiple fixed navbars wrapper -->
<div class="fixed-top">
<!-- Main navbar -->
<div class="navbar navbar-expand-md navbar-dark bg-indigo">
<div class="navbar-brand wmin-0 mr-5">
<a href="" class="d-inline-block">
<img src="" alt="Logo">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-mobile">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="navbar-nav-link">Text link</a>
</li>
</ul>
</div>
</div>
<!-- /main navbar -->
</div>
<!-- /multiple fixed navbars wrapper -->
<!-- Page content -->
<div class="page-content pt-0">
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content">
<div class="card">
<div class="card-header header-elements-inline">
<h5 class="card-title">Default ordering</h5>
<div class="header-elements">
<div class="list-icons">
<a class="list-icons-item" data-action="collapse"></a>
<a class="list-icons-item" data-action="reload"></a>
<a class="list-icons-item" data-action="remove"></a>
</div>
</div>
</div>
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>PRODUCT</th>
<th>LAST</th>
<th>CHG %</th>
<th>CHG</th>
<th>HIGH</th>
<th>LOW</th>
<th>VOL</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td tabindex="0" class="sorting_1">1</td>
<td>N/A</td>
<td>0.00061720</td>
<td>-181.40%</td>
<td>-0.00001140</td>
<td>0.00065050</td>
<td>0.00060200</td>
<td>66,122</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">2</td>
<td>N/A</td>
<td>0.00015005</td>
<td>-448.20%</td>
<td>-0.00000704</td>
<td>0.00016114</td>
<td>0.00014648</td>
<td>467,703</td>
</tr>
<tr role="row" class="odd">
<td tabindex="0" class="sorting_1">3</td>
<td>N/A</td>
<td>0.00203900</td>
<td>84.10%</td>
<td>0.00001700</td>
<td>0.00220000</td>
<td>0.00200300</td>
<td>652,229</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">4</td>
<td>N/A</td>
<td>0.00047465</td>
<td>-631.80%</td>
<td>-0.00003201</td>
<td>0.00054200</td>
<td>0.00047310</td>
<td>468,314</td>
</tr>
<tr role="row" class="odd">
<td tabindex="0" class="sorting_1">5</td>
<td>N/A</td>
<td>0.00006530</td>
<td>-440.60%</td>
<td>-0.00000301</td>
<td>0.00007078</td>
<td>0.00006495</td>
<td>1.266M</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">6</td>
<td>N/A</td>
<td>0.21814000</td>
<td>-5.50%</td>
<td>-0.00012000</td>
<td>0.22303000</td>
<td>0.21089000</td>
<td>3,511</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /default ordering -->
</div>
<!-- /content area -->
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</body>
</html>
有人建议我在做什么错吗？
感谢您的答复！
2 个答案:
答案 0 :(得分：1)
您的问题尚不清楚，但是要获得图像中显示的结果，可以使用Flexbox：
.datatable-header {
display: flex;
justify-content: space-between;
}
.dataTables_filter {
order: 2;
}
答案 1 :(得分：0)
鉴于您有7个（七个！）不同的CSS链接，发现特定的问题可能是...嗯，在开始之前先服用一些阿司匹林！但是，我认为您应该专注于此：
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
您的标题表明您设置了一个响应式设计<meta name="viewport"...（很好）。并且您表明您希望表格宽度为100％。但是您需要记住，表的宽度将受.card-body样式和任何其他父样式的限制。据我所知，这是深层次的嵌套，这可能是它没有获得想要的宽度的原因。 （有意义的希望）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？