Применение двух разных стилей CSS к двум различным таблицам данных?

Question

У меня есть два разных экземпляра Datatables в моем проекте. Я бы хотел, чтобы у них был другой стиль 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;
}

Answer 1

Вы можете поймать таблицу по id, проверить id, используя условие if, и, если совпадение, применить CSS через jQuery, как показано ниже.

var id = $('table').attr('id');
if (id == 'all_assets_datatable')
  $('table').css('margin', '0px')
else
  $('table').css('margin', '10px')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="all_assets_datatable" class="display">
  <tr>
    <td>1</td>
  </tr>
</table>

Answer 2

Оберните ваши таблицы данных в два разных элемента 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>