Responsive tables, the smart way

Question

I\'ve got a table that contains data. Tabular data. And it looks like this.

Answer 1

I know this isn't exactly what you want but I created a jsfiddle some time ago as a reference which might help: jsfiddle.net/webbymatt/MVsVj/1

essentially the markup remains the same, there's no JS and the content just reflows as expected. you just need to add the data-type attribute to the table cell.

Answer 2

ya as your html is same you can change the styles for the css properties according to the media query a better solution would be- fiddle

@media only screen and (min-width: 769px) {
       #content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
}
@media only screen and (max-width: 768px) {
#content {
    border:1px solid;
    border-collapse:collapse;
}
#content tr {
    height:4em; border-bottom:1px solid;
}
#content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
    height:4em;
}
#content td {
    padding:.07em .2em;
    white-space:nowrap;
    height:1.4em;
    display:inline;
}
#content td:not(:last-child)::after {
    display:block; content:'';
    height:0;
    border-bottom:1px solid;
}

}

one possible solution is to use media queries an hide the respective blocks or change styles accordingly

here is a fiddle
changed smaller table id to content2

@media only screen and (max-width: 768px) {
    #content{
        display:none !important;
    }
}
@media only screen and (min-width: 769px) {
    #content2{
        display:none !important;
    }
}

Answer 3

You could inline block the elements. I haven't had much time to play, but something like the following:

#content {
    border:1px solid;
    border-collapse:collapse;
}
#content td, #content th {
    border:1px solid;
    text-align:left;
    padding:.07em .2em;
    white-space:nowrap;
    font-weight:400;
}
#content td {
    display: inline-block;
    width: 100px;
}

It's not the prettiest creation, though!

http://jsfiddle.net/8H3bN/

Answer 4

Check this CodePen.

I found this solution long ago in css-tricks.com.

The table gets a little messy:

<table>
    <tr>
        <td>
            Description 1
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td class="text-center">Data 1A</td>
                        <td class="text-center">Data 1B</td>
                        <td class="text-center">Data 1C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
    <tr>
        <td>
            Description 2
        </td>
        <td>
            <table class="responsive" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>Data 2A</td>
                        <td>Data 2B</td>
                        <td>Data 2C</td>
                    </tr>
                </tbody>
            </table>                
        </td>
    </tr>
</table>

And this is the css:

    /* Small display targeting */
    @media only screen and (max-width: 767px) {
        /* Force table to not be like tables anymore */
        .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr {
            display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        .responsive thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .responsive td {
            /* Behave  like a "row" */
            position: relative;
        }

        .responsive td:before {
            /* Now like a table header */
            position: absolute;
        }
    }