БЛОГ НА HUSL


Выровнять таблицу

Автор вопроса: Ilhom Hafizov

у меня есть таблица, внутри строки еще одна таблица со своими строками, как можно выровнять их по уровню главной таблицы?

 <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td colSpan={6}>
                    <table class="table align-center">
                        <tr>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                    </table>


                </td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
        </tbody>
    </table>

введите сюда описание изображения


Источник

Ответы (1 шт):

Автор решения: DiD

У меня была похожая задача пару лет назад. Я решил её с помощью тегов <div> без использования таблиц вообще.

.table {
  display: table;
  table-layout: fixed;
}

.table-caption {
  display: table-caption;
}

.thead {
  display: table-header-group;
}

.tbody {
  display: table-row-group;
  transition: all 200ms;
}

.tfoot {
  display: table-footer-group;
}

.tcols {
  display: table-column-group;
}

.tr {
  display: table-row;
}

.col {
  display: table-column;
}

.td {
  display: table-cell;
  padding: 3px;
}

input[type=checkbox]+.tbody>.tr:last-child>.td>label {
  display: none;
}

input[type=checkbox]:checked+.tbody>.tr:last-child>.td>label {
  display: inline;
}

input[type=checkbox]:checked+.tbody>.tr {
  display: none;
}

input[type=checkbox]:checked+.tbody>.tr:last-child {
  display: table-row;
}

input[type=checkbox] {
  display: none;
}

label:before {
  width: 16px;
  height: 16px;
  content: "\2716";
  display: block;
}

input[type=checkbox]:checked+.tbody>.tr>.td>label:before {
  content: "\271a";
}

.table {
  border-left: 1px solid #eee;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.td {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.tbody>.tr>.td {
  border-bottom: 0;
}

.thead>.tr>.td,
.tbody>.tr:last-child>.td,
.tbody>.tr:last-child>.td:first-child,
.tfoot .td {
  border-bottom: 1px solid #000;
}

.thead>.tr:first-child>.td,
.tbody>.tr:first-child>.td,
.tbody>.tr:last-child>.td,
.tfoot .td,
input[type=checkbox]:checked+.tbody>.tr:last-child>.td:first-child {
  border-top: 1px solid;
}

.tbody>.tr>.td:first-child {
  border-bottom: 0;
}

.tbody>.tr:last-child>.td:first-child {
  border-top: 0;
}

.tfoot .td,
input[type=checkbox]:checked+.tbody>.tr:last-child>.td:first-child {
  border-top-color: #000;
}
<div class="table">

  <div class="table-caption">Caption</div>

  <div class="tcols">
    <div class="col"></div>
    <div class="col">Col0s</div>
    <div class="col">Col1</div>
    <div class="col">Col2</div>
    <div class="col">Col3</div>
  </div>


  <div class="thead">
    <div class="tr">
      <div class="td"></div>
      <div class="td">Col[0]</div>
      <div class="td">Col[1]</div>
      <div class="td">Col[2]</div>
      <div class="td">Col[3]</div>
    </div>
  </div>

  <input id="group-1" type="checkbox" />
  <div class="tbody">
    <div class="tr">
      <div class="td"><label for="group-1"></label></div>
      <div class="td">Data[0][0][0]</div>
      <div class="td">Data[0][0][1]</div>
      <div class="td">Data[0][0][2]</div>
      <div class="td">Data[0][0][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[0][1][0]</div>
      <div class="td">Data[0][1][1]</div>
      <div class="td">Data[0][1][2]</div>
      <div class="td">Data[0][1][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[0][2][0]</div>
      <div class="td">Data[0][2][1]</div>
      <div class="td">Data[0][2][2]</div>
      <div class="td">Data[0][2][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[0][3][0]</div>
      <div class="td">Data[0][3][1]</div>
      <div class="td">Data[0][3][2]</div>
      <div class="td">Data[0][3][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[0][4][0]</div>
      <div class="td">Data[0][4][1]</div>
      <div class="td">Data[0][4][2]</div>
      <div class="td">Data[0][4][3]</div>
    </div>
    <div class="tr">
      <div class="td"><label for="group-1"></label></div>
      <div class="td">Subtotal[0][0]</div>
      <div class="td">Subtotal[0][1]</div>
      <div class="td">Subtotal[0][2]</div>
      <div class="td">Subtotal[0][3]</div>
    </div>
  </div>

  <input id="group-2" type="checkbox" />
  <div class="tbody">
    <div class="tr">
      <div class="td"><label for="group-2"></label></div>
      <div class="td">Data[1][0][0]</div>
      <div class="td">Data[1][0][1]</div>
      <div class="td">Data[1][0][2]</div>
      <div class="td">Data[1][0][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[1][1][0]</div>
      <div class="td">Data[1][1][1]</div>
      <div class="td">Data[1][1][2]</div>
      <div class="td">Data[1][1][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[1][2][0]</div>
      <div class="td">Data[1][2][1]</div>
      <div class="td">Data[1][2][2]</div>
      <div class="td">Data[1][2][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[1][3][0]</div>
      <div class="td">Data[1][3][1]</div>
      <div class="td">Data[1][3][2]</div>
      <div class="td">Data[1][3][3]</div>
    </div>
    <div class="tr">
      <div class="td"></div>
      <div class="td">Data[1][4][0]</div>
      <div class="td">Data[1][4][1]</div>
      <div class="td">Data[1][4][2]</div>
      <div class="td">Data[1][4][3]</div>
    </div>
    <div class="tr">
      <div class="td"><label for="group-2"></label></div>
      <div class="td">Subtotal[1][0]</div>
      <div class="td">Subtotal[1][1]</div>
      <div class="td">Subtotal[1][2]</div>
      <div class="td">Subtotal[1][3]</div>
    </div>
  </div>

  <div class="tfoot">
    <div class="tr">
      <div class="td"></div>
      <div class="td">Total[0]</div>
      <div class="td">Total[1]</div>
      <div class="td">Total[2]</div>
      <div class="td">Total[3]</div>
    </div>
  </div>
</div>

Знаю. Это не совсем тот ответ который вы ожидали. Но это один из способов верстки таблицы в таблице. Он вас может подтолкнуть к более изощренным интересным решениям.Например, отображение древовидной структуры таблицы как в Excel или просто добавить анимацию.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.