使divs行爲像表

我想讓我的div像一張桌子一樣行動，所以我可以將我的「列」堆疊在一起以獲得良好的移動體驗，但由於某種原因，我的表不會伸展到100％均勻分佈。使divs行爲像表

現場演示：

下面是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>

而CSS：

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

來源

2015-03-02 Luca

從.rds-column刪除float: left：

Updated Example

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

我還建議增加table-layout: fixed到.rds-table-stacked元件，然後以包括在寬度/高度計算填充添加box-sizing: border-box與填充的元素。在這樣做的時候，一切都會加起來100%。

來源

2015-03-02 21:39:19

使divs行爲像表

回答

相關問題