HTML встраивание таблицы в строку таблицы (с использованием таблиц div) - PullRequest
Новая
       50

HTML встраивание таблицы в строку таблицы (с использованием таблиц div)

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

Что я пытаюсь сделать:

GOAL

Обратите внимание, что под новой строкой находится встроенная таблица. Идея состоит в том, что это будет выпадающий список для одной строки, при опускании он будет раскрывать подтаблицу. Там будут существующие строки под раскрывающейся таблицей.

Что на самом деле происходит:

REALITY

Встроенная таблица, кажется, охватывает только первый столбец, но мне нужно, чтобы она соответствовала ширине всей строки. Первоначально я использовал теги HTML <table>, но попытался перейти на формат divTable. К сожалению, это тоже не сработало.

Что я здесь не так делаю?

Мой HTML: 

<div class="divTable">
    <div class="divTableHeading">
        <div class="divTableRow">
            <div class="divTableHead">head1</div>
            <div class="divTableHead">head2</div>
            <div class="divTableHead">head3</div>
            <div class="divTableHead">head4</div>
            <div class="divTableHead">head5</div>
            <div class="divTableHead">head6</div>
            <div class="divTableHead">head7</div>
        </div>
    </div>
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">cell1</div>
            <div class="divTableCell">cell2</div>
            <div class="divTableCell">c3</div>
            <div class="divTableCell">c4</div>
            <div class="divTableCell">c5</div>
            <div class="divTableCell">-c6</div>
            <div class="divTableCell">c7</div>
        </div>
        <div class="divTableRow">
        <div class="divTable">
            <div class="divTableHeading">
                <div class="divTableRow">
                    <div class="divTableHead">embedded1</div>
                    <div class="divTableHead">embedded2</div>
                    <div class="divTableHead">embedded3</div>
                </div>
            </div>
            <div class="divTableBody">
                <div class="divTableRow dropdownTable">
                    <div class="divTableCell">1</div>
                    <div class="divTableCell">2</div>
                    <div class="divTableCell">3</div>
                </div>
                <div class="divTableRow dropdownTable">
                    <div class="divTableCell">1</div>
                    <div class="divTableCell">2</div>
                    <div class="divTableCell">3</div>
                </div>
            </div>
        </div>
        </div>

    </div>
</div>

Мой CSS: 

.divTable{
    display: table;
    width: 100%;
    width: 100%;
    border: 1px solid #eeeeeea8;
    -webkit-box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    box-shadow: 6px 9px 33px -5px rgba(0,0,0,0.75);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}

.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}

.divTableRow:nth-child(even){
    background-color: #f2f2f2;
}
.divTableRow:hover:not(:first-child) {
    background-color: #ddd;
}
.divTableCell, .divTableHead{
    border: 1px solid rgba(221, 221, 221, 0.836);
    padding: 8px;
}
.divTableHead{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: rgba(251, 38, 0,.9);
    color: white;
}

1 Ответ

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

Я дам вам совет, который я дал себе. Если вы не разрабатываете для некоторых старых браузеров, таких как IE11 или аналогичные, вы можете использовать Grid CSS для создания такой сложной организации, не теряя себя и других в этой пропасти кода. Как вы можете видеть в Сетка CSS , вы можете лучше контролировать, как строки и столбцы будут вести себя, вы даже можете создать свое приложение, чтобы лучше вести себя по-разному. Размеры экранов (как мобильных, так и больших). У вас есть почти безграничные возможности для работы с ним, так как ваш код переднего плана будет быстрее и лучше улучшаться, чем просто используйте эти div, но как таблица .

Хотелось бы, чтобы это помогло на вашем пути.

...