HTML 将表格嵌入表格行（使用 div 表格）答案

【问题标题】：HTML embed table into a table row (using div tables)HTML 将表格嵌入表格行（使用 div 表格）
【发布时间】：2019-05-31 07:45:57
【问题描述】：

我想做什么：

请注意，在新行的位置下有一个嵌入式表格。这个想法是这将是单行的下拉菜单，下拉后会显示一个子表。下拉表下会有现有的行。

实际发生了什么：

嵌入的表格似乎只跨越第一列，但我需要它来适应整行的宽度。我最初使用 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;
}

【问题讨论】：

stackoverflow.com/questions/9277661/… 试试这个代码

标签： css html html-table css-tables

【解决方案1】：

我会给你一个我给自己的建议。除非你正在开发一些像 IE11 或类似的旧浏览器，否则你可以使用Grid CSS 来构建这样一个精心设计的组织，而不会在这个代码深渊中迷失自己和他人。正如您在 Grid CSS 中所见，您可以更好地控制行和列的行为方式，甚至可以将应用程序构建得更好表现在不同的屏幕尺寸（如移动或大屏幕）。你有几乎无限的选择来使用它，因为你的前端代码会比使用这些 div 但像 table 更快并且改进得更好。

我希望这对你的道路有所帮助。

【讨论】：