你想把 HTML 排列成这样：

<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

进入这个：

<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>

正确的？

您可以使用 Javascript 执行此操作，但是，如果不了解有关站点/HTML 文件结构的更多信息，则很难提出一种方法。我试一试。

假设您的<table>标签带有一个 id（像这样：<table id="myTable">您可以像这样在 javascript 中访问它：

var myTable = document.getElementById('myTable');

您可以像这样创建一个新表：

var newTable = document.createElement('table');

现在您需要将旧表行转换为新表列：

var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
    if(myTable.rows[r].cells.length > maxColumns) {
        maxColumns = myTable.rows[r].cells.length;
    }
}


for(var c = 0; c < maxColumns; c++) {
    newTable.insertRow(c);
    for(var r = 0; r < myTable.rows.length; r++) {
        if(myTable.rows[r].length <= c) {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = '-';
        }
        else {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
        }
    }
}

这应该做你需要的。预先警告：未经测试。将此 javascript 代码处理到 HTML 页面中作为练习留给读者。如果有人发现我遗漏的任何错误，如果您将它们指出给我或简单地编辑以修复，我会很高兴:)

这是一个经过测试的函数，它将转置表格，它将保留您与表格中的任何元素挂钩的任何格式/事件（即：对单元格或单元格内容的点击）

function TransposeTable(tableId)
{        
    var tbl = $('#' + tableId);
    var tbody = tbl.find('tbody');
    var oldWidth = tbody.find('tr:first td').length;
    var oldHeight = tbody.find('tr').length;
    var newWidth = oldHeight;
    var newHeight = oldWidth;

    var jqOldCells = tbody.find('td');        

    var newTbody = $("<tbody></tbody>");
    for(var y=0; y<newHeight; y++)
    {
        var newRow = $("<tr></tr>");
        for(var x=0; x<newWidth; x++)
        {
            newRow.append(jqOldCells.eq((oldWidth*x)+y));
        }
        newTbody.append(newRow);
    }

    tbody.replaceWith(newTbody);        
}

注意： - 需要 Jquery - 未在非常大的表上进行测试 - 可能会在具有跨列/行的表上出现问题 - 可能会在具有任意组合的表上乱七八糟

因此，只要您的表格没有跨越单元格并且不使用 thead/th，就可以了。

这是一个解决方案，在这种情况下，这是针对手机和平板电脑的，删除媒体查询和绝对位置，您就拥有了！

基于此：

table, thead, tbody, th, td, tr { 
display: block; 
}

http://css-tricks.com/responsive-data-tables/

也许有人需要它：我通过 CSS（一个包含一列的表格）将 TR 转换为 TD。从第二行到 TR 表末尾应用以下代码：

<tr style="float:left;">

还使用下面的代码将每 3 行显示为一行 3 列：

<tr style="float:left; width:33.33%;">