1.800.323.3639 | Support | Training

Avtex

Responsive, CSS-only faux tables

| No Comments

Tables are mildly responsive — the individual cells can resize as necessary. But they aren’t fully responsive without Javascript: You can’t take two TDs that are next to each other and suddenly have them stack, as that requires changing the HTML structure of the table.

But you *can* do it with divs that are made to *look* like a table. See the demo here.

HTML

<div class="table-wrap">
    <div class="row-wrap">
        <div class="left-td"></div>
        <div class="right-td"></div>
        <div class="clear"></div>
    </div>
</div>

Note how we’re using divs to mimic a table’s “table -> tr -> td” structure.

CSS

    .table-wrap {
        border:1px solid black;
        width:100%;
        background:#fc9;
     }
    .table-wrap div {
        margin:0;
    }
    .row-wrap {
        border-bottom:1px solid black;
        clear:both;
    }
    .left-td {
        float:left;
        width:24%;
        padding:2%;
    }
    .right-td {
        float:left;
        width:67%;
        padding:2%;
        border-left:1px solid black;
        background:white;
     }
    .clear {clear:both;}

“table-wrap” takes care of the outer border of the page. “table-row” contains the floated “td” divs and applies the bottom border to each row. “right-td” takes care of the vertical borders between cells. The “clear” styles keep everything in place and make sure each row is as deep as its deepest cell.

You may have to tweak the styles for your particular needs, but this gives you the basic idea.

Going responsive

Now you can make the “table” responsive with something like this:

@media all and (max-width:480px) {
        .left-td {
            float:none;
            width:96%;
            border-bottom:1px solid black;
        }
        .right-td {
            float:none;
            width:96%;
            border-left:0px solid transparent;
        }
}

Thanks to the percentage widths in the original CSS, the “table” will scale like a normal table until the screen width is only 480px.

Then, by taking off the floats and making the “td” divs the full width of the table (after accounting for the 2% of padding to either side), the “cells” that are next to each other in widescreen move to be on top of each other in a narrower screen.

You can make the divs act even more like table cells with the table-related “display” options. Just be warned that they’re not supported in IE7 or earlier. Thankfully, that’s not necessarily a deal-killer these days.

Let’s Talk About CX

X