How to convert columns to rows using CSS


Tags: javascript,html,css

Problem :

Hi I need to convert columns to rows and rows to columns. I have both column headers and rows headers to the left. The row headers are just bold text to the left of the row to define what the row is.

I am trying to make this table mobile friendly. The table is 7 columns wide and the 7 columns do not show in a smart phone. So my idea is to use a media query to display a table where the columns and rows are switched since there will be no more than 3 rows. Can this be done?



Solution :

DEMO

Css Solution: Simply turn your td & th to display:block; & your tr to display:table-cell;

CSS:

@media screen and (max-width:767px) {
    table tr > *{
        display: block;
    }
    table tr {
        display: table-cell;
    }
}

Drawback: If your cells have too much data the layout will break Example.

jQuery Solution: We can keep track of element height to stay the same DEMO

JS:

$(function () {
    switchRowsAndCols("table", 767);
});

function switchRowsAndCols(thisTable, resolution) {
    if ($(window).width() < resolution) {
        switchRowsAndColsInnerFun(thisTable);
    }
    $(window).resize(function () {
        if ($(window).width() < resolution) {
            switchRowsAndColsInnerFun(thisTable);
        }else{
            switchRowsAndColsRemove(thisTable);
        }
    });
};

function switchRowsAndColsRemove(thisTable) {
    $("tr > *", thisTable).css({
        height: 'auto'
    });
};

function switchRowsAndColsInnerFun(thisTable) {
    var maxRow = $("tr:first-child() > *", thisTable).length;

    for (var i = maxRow; i >= 0; i--) {

        $("tr > *:nth-child(" + i + ")", thisTable).css({
            height: 'auto'
        });

        var maxHeight = 0;

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            var h = $(this).height();
            maxHeight = h > maxHeight ? h : maxHeight;
        });

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            $(this).height(maxHeight);
        });
    };
};

    CSS Howto..

    CSS: How to lay an image on top of a table

    How to convert a .PNG file into a source code that can be stored into mysql and called up via CSS as “png”

    HTML layout with vertical divider and menu between sections - how?

    how to place last div into right top corner of parent div? (css)

    How to make a space between tags (icons) in table?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to get the div block to be centered in a modal window

    How do i make part of a CSS background fit perfectly to a browser

    How can I call ajax, without “link_to” kind of helpers?

    how to make background fit on screen bootstrap3

    How to create a row of three expandable/collapsible divs which react on hover?

    Android stock browser: How to prevent double tap closing browser

    How to change width of object in mobile version

    How can I center a div within another div?

    How to make a div take the remaining height without knowing the height?

    How to change Kendo Excel Button Content Text

    How to sort and combine this css rules so it doesn't repeat so much?

    How to center in CSS only after specific HTML element?

    how can you have layers see through each other on a web page

    How to program the navigation bar(image) web html

    How to change a Pseudo-class style through JavaScript?

    How to put an image in div with CSS?

    How to have a video take up the viewport height and width?

    How to make a transition effect that just perform like css transition?

    How to retrieve the background image url defined in CSS?

    How to highlight one image over other using jquery css? [duplicate]

    How to extend background CSS styling indefinitely along the x-axis?

    A plugin or tool to show what elements on a page are effecting other elements?

    how to get this table to work properly?

    How to link to a CSS if a certain condition happens?