Сделать divs act like table

Question

Я пытаюсь заставить мои divs действовать как таблица, поэтому я могу складывать свои «столбцы» друг на друга для хорошего мобильного использования, но по какой-то причине моя таблица не растягивается до 100% и равномерно распределить.

Живая демонстрация:

http://jsfiddle.net/7sqkgfuh/3/

Вот 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; 
} 

Answer 1

Удалить float: left из .rds-column:

Updated Example

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

Я бы также предложить добавить table-layout: fixed к .rds-table-stacked элемента, а затем добавить к box-sizing: border-box элементов с прокладкой для того, чтобы включать заполнение в расчетах ширина/высота. При этом все будет складываться до 100%.