Question

我要做什么：

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;
}

Answer 1

我会给你一个我自己给我的建议。除非您正在向IE11或类似的老浏览器发展，否则您可以使用Grid CSS来建立这种精心组织的组织，而不会在代码深渊中迷失自己和他人。正如您在 Grid CSS 中看到的那样，您可以更好地控制行和列的行为，甚至可以构建更好的应用程序会在不同的屏幕尺寸（如移动屏幕或大屏幕）上运行。您几乎有无限的选择可以使用它，因为您的前端代码将更快，更好地改进，然后只需使用这些 div但与table 类似。

我希望这对您有所帮助。

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

1 个答案: