色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何使用div元素創建表格結構?

錢浩然2年前9瀏覽0評論

我想使用div元素創建一個表,并在div類table-row下創建一個table元素,并將其樣式化為table-row類下的table exact。 如何使用div元素創建這個表格結構,并在table-row類下創建一個表格。表格行類是表格類的父類。 table元素是table-row類的子元素。這樣做的要求是table元素應該正好在table-row類的下面。

我不 知道怎么做。我試圖這樣做,但是table元素并不完全在table-row類下。我不想使用表格元素。我想使用div元素。

.table {
display: table;
width: 100%;
border-collapse: collapse;
}

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

.table-header-cell {
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}

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

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

.table-cell {
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}

<div class="table">
    <div class="table-header">
        <div class="table-header-cell">Name</div>
        <div class="table-header-cell">Age</div>
        <div class="table-header-cell">Occupation</div>
    </div>
    <div class="table-body">
        <div class="table-row">
            <div class="table-cell">John Doe</div>
            <div class="table-cell">30</div>
            <div class="table-cell">Software Engineer</div>
            <div class="detail-table-cell">
                <table class="table">
                    <tr>
                        <td>hello</td>
                        <td>30</td>
                        <td>Engineer</td>
                    </tr>
                    <tr>
                        <td>Jaoe</td>
                        <td>25</td>
                        <td>doc</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell">Jane Doe</div>
            <div class="table-cell">25</div>
            <div class="table-cell">Doctor</div>
            <div class="detail-table-cell">
                <table class="table">
                    <tr>
                        <td>fas</td>
                        <td>30</td>
                        <td>Endasfgineer</td>
                    </tr>
                    <tr>
                        <td>Jaoe</td>
                        <td>25</td>
                        <td>dfdasoc</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>