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 :


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


@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


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

function switchRowsAndCols(thisTable, resolution) {
    if ($(window).width() < resolution) {
    $(window).resize(function () {
        if ($(window).width() < resolution) {

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 () {

    CSS Howto..

    how to scale image according to image - css

    How to make text responsive to div size?

    How should I handle this CSS Inheritance conundrum?

    How have icons/lines change color on scroll down using Jquery/CSS?

    how to show the hidden div with same properties css with jquery

    How to magnify images on hover using purely css? [closed]

    How Do I Modify My Linear Gradient Width to 100%?

    How to best format an HTML form like this where user can dynamically add subfields? (table? list? css3?)

    How to load chosen alternative css as default css? [closed]

    How do I change phpmyadmin font size for sql query box?

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to link external CSS stylesheets on a Chromebook

    How to HTML/CSS Limit / Clip / Mask an object?

    How to swap two button elements using float in CSS

    Yii2 how to include multiple css files from specific view or controller action

    How to overlay images with css (cross-browser)

    how to override min-width

    PHP Show Hidden Div

    Hiding the content of a
    and showing another
    with different contents

    How to display 'fit' image in CSS or HTML?

    How to get two HTML section blocks align in CSS?

    how do i set the text that my json file is printing to screen i want to hide the text

    How to check if CSS is on an element? [closed]

    CSS: How to load a css file for all browsers except IE?

    Can you tell me why my webpage displays differently in IE and how to fix it

    How to write shorter css code select child?

    How to pause css animation?

    How to create a pattern overlay on top of an image

    CSS: How to increase distance between two elements?