Как вставить div в таблицу?

Question

Как вставить div в таблицу?

Рейтинг: 0Ответов: 0Опубликовано: 24.04.2023

Возник такой вопрос: каким образом я могу добавить div в таблицу?

Передо мной стоит задача: есть таблица с данными, при клике на лого изменения данных нужно, чтобы раскрывался div с детализацией.

При вставке div в таблицу, он просто растягивается по размеру с 1 колонкой, но мне нужно, чтобы это был независимый div.

Изначально делал таблицу при помощи тегов table, tr, td, потом решил сварганить таблицу из div'ов, но результат тот же :(

Может возможно как-то реализовать задачу или придется делать по-другому?

.table {
    display: table;
    margin: auto;
    font-family: "Noto";
    font-size: 14px;
    border-collapse: collapse;
    text-align: center;
    margin: auto;
    width: 90%;
    overflow: auto;
}

.table-head {
    display: table-cell;
    /* верх право низ лево */
    padding: 3px 1px 10px 1px;
    background: #6498ff;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 1px #000;
    letter-spacing: 1px;
    border: 1px solid white;
}

.table-caption {
    display: table-caption;
    text-align: center;
    margin-bottom: 17px;
    font-size: 17px;
    letter-spacing: 2px;
}

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

.td {
    display: table-cell;
    background: #bdd9f4;
    border: 1px solid white;
}

.test {
    display: block;
}

<div class="table">
    <div class="table-caption">Все заявки</div>

    <div class="table-head"><img src="../img/edit-main.png" alt="edit" class="edit-main"></div>
    <div class="table-head">Номер</div>
    <div class="table-head">Дата</div>
    <div class="table-head">Подразделение</div>
    <div class="table-head">Ответственный</div>
    <div class="table-head">Телефон</div>
    <div class="table-head">Год</div>
    <div class="table-head">Документ</div>
    <div class="table-head">Статус</div>
    <div class="table-head">Вид</div>
    <div class="table-head">Сумма</div>
    <div class="table-head">Примечание</div>

    <div class="table-row">
        <div class="td">click</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
    </div>

    <div class="table-row">
        <div class="td">click</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
        <div class="td">test</div>
    </div>

    <div class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore iste quos eaque ipsum temporibus reiciendis repudiandae, expedita perspiciatis laboriosam quod cum, voluptates officiis numquam excepturi, veniam iure necessitatibus
        id. Minus!</div>
</div>

css html

Источник: Stack Overflow на русском

Как вставить div в таблицу?

Ответы