时间戳

首页 > 解决方案 > 将两种不同的 CSS 样式应用于两个不同的数据表？

jquery - 将两种不同的 CSS 样式应用于两个不同的数据表？

问题描述

我的项目中有两个不同的数据表实例。我希望他们有不同的 CSS 样式。出于这个问题的目的，假设我想在两个表中使用不同大小的边距。有没有一种简单的方法可以做到这一点？

下面是我的代码的简化版本。

表格1

HTML 和 JS：

<script>
  $(document).ready( function () {
  $('#all_assets_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="all_assets_datatable" class="display">

        # Various table content

    </table>

CSS：

table.dataTable {
margin: 0px;
}

表 2

HTML 和 JS：

<script>
   $(document).ready( function () {
  $('#asset_changes_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="asset_changes_datatable" class="display">

       # Various table content

    </table>

CSS：

table.dataTable {
margin: 10px;
}

标签： jquerydatatabledatatables

解决方案

将您的数据表包装在两个不同的 div 中，并为每个 div 赋予不同的名称或类。

.dtOne table.datatable{
     margin: 0px;
 }

.dtTwo table.datatable{
         margin: 10px;
     }

<div class="dtOne">//Table one goes here</div>
<div class="dtTwo">//Table two goes here</div>

推荐阅读