如何使用CSS将列转换为行 [英] How to convert columns to rows using CSS

问题描述

我需要将列转换为行和行转换为列。我左边有列标题和行标题。行标题只是行左边的粗体文本，以定义行是什么。

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.

我想让此表格适合移动设备。表格为7列宽，7列不显示在智能手机中。所以我的想法是使用媒体查询显示一个表，其中列和行切换，因为将不会超过3行。可以这样做吗？

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?

推荐答案

DEMO

DEMO

Css解决方案：只需将 td & th 到 display：block; &您的 tr 至 display：table-cell;

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解决方案：我们可以跟踪元素高度保持不变 DEMO

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将列转换为行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！