CODEWITHSUNDEEP
htmlcsscss-tables
Luca
Luca

Reputation: 385

Make divs act like table

I am trying to make my divs act like a table so I can stack my "columns" on-top of each other for a good mobile experience but for some reason my table wont stretch to 100% and evenly distribute.

Live demo:

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

Here is the 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>

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

Upvotes: 2

Views: 1113

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240868

Remove float: left from .rds-column:

Updated Example

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

I'd also suggest adding table-layout: fixed to the .rds-table-stacked element, and then adding box-sizing: border-box to the elements with padding in order to include the padding in the width/height calculations. In doing so, everything will add up to 100%.

Upvotes: 1

Related Questions