CSS - Datatable не оформлен правильно - PullRequest
Новая
       0

CSS - Datatable не оформлен правильно

0 голосов
/ 20 января 2019

Я создаю макет внешнего интерфейса в своей теме.

Однако стиль данных не имеет правильного стиля.Это должно выглядеть следующим образом:

enter image description here

Мне кажется, что мой 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 голосов
/ 21 января 2019

Учитывая, что у вас есть 7 (семь!) Различных CSS-ссылок, вы можете найти конкретную проблему ... ну, примите немного аспирина перед началом! Тем не менее, я думаю, что вы должны сосредоточиться на этом: 

  <div class="card-body">
    <table class="table datatable-responsive dataTable" style="width:100%">

Ваш заголовок указывает, что у вас есть набор адаптивного дизайна <meta name="viewport"... (что хорошо). И вы указываете, что вы хотите ширину таблицы на 100%. Но вы должны помнить, что ширина таблицы будет ограничена стилями .card-body и любыми другими родительскими стилями. Насколько я могу судить, это гнездо для глубокого погружения, что может быть причиной того, что он не получает желаемую ширину. ( в надежде, что это имеет смысл )

0 голосов
/ 20 января 2019

Ваш вопрос не совсем понятен, но для достижения результата, показанного на вашем изображении, вы можете использовать Flexbox: 

.datatable-header {
    display: flex;
    justify-content: space-between;
}

.dataTables_filter {
    order: 2;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...