相关疑难解决方法(0)

如何在HTML中创建垂直表？通过垂直,我的意思是行将是垂直的,左边是表头.

我也需要它,所以我可以访问这些行(在这种情况下是垂直),就像在普通表中一样<tr>.这是因为我动态获取一行数据(如行A)并将其插入表中.我使用angularJS来避免DOM操作,所以我不是在寻找使用Javascript的复杂DOM操作.

我想将整个桌子逆时针旋转90度.即.应将td(row = ith,column = jth)的内容传送到td(row =(行数总数-j + 1)th,column = ith).div内的文本也应该旋转90度.

<table><tbody>
<tr><td>a</td><td>1</td><td>8</td></tr>
<tr><td>b</td><td>2</td><td>9</td></tr>
<tr><td>c</td><td>3</td><td>10</td></tr>
<tr><td>d</td><td>4</td><td>11</td></tr>
<tr><td>e</td><td>5</td><td>12</td></tr>
<tr><td>f</td><td>6</td><td>13</td></tr>
<tr><td>g</td><td>7</td><td>14</td></tr>
</tbody></table>   

这个表应该转换为

<table><tbody>
<tr>
    <td>8</td><td>9</td><td>10</td><td>11</td>
    <td>12</td><td>13</td><td>14</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
    <td>5</td><td>6</td><td>7</td>
</tr>
<tr>
    <td>a</td><td>b</td><td>c</td><td>d</td>
    <td>e</td><td>f</td><td>g</td>
</tr>
</tbody></table> 

我可以通过javascript循环来做到这一点.但它很长.我想知道是否有更优雅的方式.提前致谢.

我有这张桌子：

<table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

这将信息按行组织......但我想旋转它并将其显示在列中......我希望这足以解释我想要的：

我现在如何拥有它：

row1: aaaa
row2: bbbb
row3: cccc imag

我想要它的方式：

 row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag  

我怎样才能用 CSS 做到这一点？

是否存在语义CSS或HTML属性/属性来显示table行和列交换的？

换句话说，我想以一种方式编写代码，但是有些东西会用列翻转行，反之亦然。

环顾四周，我只找到了交换它们的JavaScript方法，但就我而言，这不是我想要的。（如果没有CSS / HTML解决方案，那么我宁愿重构代码。）

我需要转置 HTML 表格（交换行和列）。我发现了很多 jQuery 插件，但它们超出了我的需要。

我从这个堆栈中改编了一些简洁的 jQuery 代码，但它不适用于包含 thead 和 tfoot 元素的表。

function tableTransform(objTable) {
    objTable.each(function () {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function () {
            var i = 0;
            $(this).find("td").each(function () {
                i++;
                if (newrows[i] === undefined) {
                    newrows[i] = $("<tr></tr>");
                }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function () {
            $this.append(this);
        });
    });

    return false;
}

我创建了下面的小提琴，它提供了标记和代码的示例。有人可以更新该函数以支持 thead 和 tfoot 元素吗？

http://jsfiddle.net/4tobvo05/4/

就像现有代码一样，新代码必须维护每个 td 上的类和样式值以及表本身，以便正确应用 CSS。它还需要修复 tfoot，以便它包含正确数量的 td 单元格，以包裹不间断的空格。

有没有办法（我不知道合适的词）用jQuery扭曲表格？具有功能或其他功能？

例如，我有一个这样的表：

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

我想要这样：

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>