1

Нужна помощь. Лучше всего объяснит приложенная картинка + прилагаю код главной таблицы. Интересует как вставить сюда вторую таблицу, которая бы не нарушила целостность первой. Помогите пожалуйста, натолкните на правильный путь. Приложенное изображение таблицы

table {
  width: 1200px;
  border-spacing: 0 6px;
}

table thead tr {
  height: 59px;
  margin-top: -1px;
  margin-bottom: -1px;
}

table thead tr th {
  font-weight: 400;
  color: #7f7f7f;
}

table thead tr th:nth-child(1) {
  text-align: left;
  padding-left: 18px;
}

table thead tr th:nth-child(2) {
  text-align: left;
  padding-left: 18px;
}

table tbody {
  width: 1200px;
}

table tbody tr {
  height: 48px;
  background-color: #f8f8f8;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

table tbody tr td {
  color: #202020;
  text-align: center;
  border-spacing: 0 6px;
}

table tbody tr td:nth-child(1) {
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: left;
  padding-left: 18px;
}

table tbody tr td:nth-child(2) {
  text-align: left;
}

table tbody tr td:nth-child(3) {
  font-weight: 500;
}

table tbody tr td:nth-child(4) {
  font-weight: 500;
}

table tbody tr td:nth-child(5) {
  font-weight: 500;
  color: #249509;
}

table tbody tr td:nth-child(2) {
  padding-left: 18px;
}

table tbody tr td:nth-child(9) {
  width: 58px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

table tbody tr td:nth-child(9) .arrow {
  width: 11px;
  height: 10px;
  background-image: url(../img/orders_arrows.png);
  margin: 0 auto;
}
<table>
  <thead>
    <tr>
      <th>Дата</th>
      <th>Номер</th>
      <th>Сумма (руб)</th>
      <th>Сумма ($)</th>
      <th>Статус</th>
      <th>Юридическое лицо</th>
      <th>Транспортная компания</th>
      <th>№ отправления</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
  </tbody>
</table>

0

1 ответ 1

1

$("table.main > tbody > tr").click(function() {
  var $nextRow = $(this).next("tr");
  if ($nextRow.hasClass("hidden"))
    $nextRow.toggle();
});
tr.hidden {
  display: none;
}

table.details {
  width: 100%;
}

table.main {
  width: 1200px;
  border-spacing: 0 6px;
}

table.main thead tr {
  height: 59px;
  margin-top: -1px;
  margin-bottom: -1px;
}

table.main thead tr th {
  font-weight: 400;
  color: #7f7f7f;
}

table.main thead tr th:nth-child(1) {
  text-align: left;
  padding-left: 18px;
}

table thead tr th:nth-child(2) {
  text-align: left;
  padding-left: 18px;
}

table.main tbody {
  width: 1200px;
}

table.main tbody tr {
  height: 48px;
  background-color: #f8f8f8;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

table.main tbody tr td {
  color: #202020;
  text-align: center;
  border-spacing: 0 6px;
}

table.main tbody tr td:nth-child(1) {
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: left;
  padding-left: 18px;
}

table.main tbody tr td:nth-child(2) {
  text-align: left;
}

table.main tbody tr td:nth-child(3) {
  font-weight: 500;
}

table.main tbody tr td:nth-child(4) {
  font-weight: 500;
}

table.main tbody tr td:nth-child(5) {
  font-weight: 500;
  color: #249509;
}

table.main tbody tr td:nth-child(2) {
  padding-left: 18px;
}

table.main tbody tr td:nth-child(9) {
  width: 58px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

table.main tbody tr td:nth-child(9) .arrow {
  width: 11px;
  height: 10px;
  background-image: url(../img/orders_arrows.png);
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main">
  <thead>
    <tr>
      <th>Дата</th>
      <th>Номер</th>
      <th>Сумма (руб)</th>
      <th>Сумма ($)</th>
      <th>Статус</th>
      <th>Юридическое лицо</th>
      <th>Транспортная компания</th>
      <th>№ отправления</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="hidden">
      <td colspan="9">
        <table class="details">
          <tr>
            <td>Test 1</td>
            <td>Test 2</td>
            <td>Test 3</td>
          </tr>
          <tr>
            <td>Test 4</td>
            <td>Test 5</td>
            <td>Test 6</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>22.07.2018</td>
      <td>1054010</td>
      <td>100 050 руб.</td>
      <td>1050 $</td>
      <td>Выполнен</td>
      <td>Фетисов Сергей</td>
      <td>DHL Delivery</td>
      <td>5900004142424</td>
      <td>
        <div class="arrow"></div>
      </td>
    </tr>
    <tr class="hidden">
      <td colspan="9">
        <table  class="details">
          <tr>
            <td>Test 7</td>
            <td>Test 8</td>
            <td>Test 9</td>
          </tr>
          <tr>
            <td>Test 10</td>
            <td>Test 11</td>
            <td>Test 12</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

2
  • спасибо большое, помогло! )
    – Wile E
    8 авг 2018 в 17:08
  • @WileE На здоровье. Успехов!
    – user176262
    8 авг 2018 в 17:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.