Html 使div的行为类似于表

我试图让我的div像一张桌子一样，这样我就可以把我的“列”叠在一起，以获得良好的移动体验，但由于某些原因，我的桌子无法伸展到100%并均匀分布

现场演示：

以下是HTML：

<div class="rds-table-stacked">
    <div class="rds-column">
        <div class="rds-table-header">Header One</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
    </div>
    <div class="rds-column">
        <div class="rds-table-header">Header Two</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
    </div>
    <div class="rds-column">
        <div class="rds-table-header">Header Four</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
    </div>
    <div class="rds-column">
        <div class="rds-table-header">Header Five</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
        <div class="rds-cell">Cell Item</div>
    </div>
</div>

---

从

.rds列

中删除

float:left

：

我还建议将

table layout:fixed

添加到

.rds table stacked

元素中，然后将

box size:border box

添加到带有填充的元素中，以便在宽度/高度计算中包含填充。这样做，所有内容的总和将达到

100%

.rds-table-stacked {
    width:100%;
    border-bottom:3px blue solid;
    display: table;
}
.rds-column {
    float:left;
    width:auto;
    display:table-cell;
}
.rds-column > div {
    padding: 6px 12px 8px 12px;
    border-bottom:1px #d1d2d1 solid;
    width:100%;
}
.rds-column > div:nth-of-type(even){
    background: green;
}

.rds-cell {
    float:left;
    clear:both;
    display: table-cell;
}

@media (max-width: 500px) {
    .rds-column {
        clear:both;
        width:100%;
    }
}

.rds-table-header {
    background:blue;
    color:white;
}

.rds-column {
    /* float: left */
    display: table-cell;
}