带有垂直行的 HTML 表格

Posted

技术标签:

【中文标题】带有垂直行的 HTML 表格【英文标题】:HTML Table with vertical rows 【发布时间】:2013-05-30 20:44:47 【问题描述】:

如何在 html 中制作垂直表格?所谓垂直,我的意思是行将是垂直的,表格标题在左侧。

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

【问题讨论】:

【参考方案1】:

如果你想让<tr> 显示列而不是行,试试这个简单的 CSS

tr  display: block; float: left; 
th, td  display: block; 

这应该显示你想要的,只要你使用单行单元格(表格行为被删除)。

/* single-row column design */
tr  display: block; float: left; 
th, td  display: block; border: 1px solid black; 

/* border-collapse */
tr>*:not(:first-child)  border-top: 0; 
tr:not(:first-child)>*  border-left:0; 
<table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table>

【讨论】:

@Sean 很伤心。在我给出这个答案时,IE 还不是 v11。而且它似乎不会在这里太久,微软可能会转向斯巴达。要解决此问题,您可以尝试设置 table, tbody display: block; 刚刚在 IE11 中测试过,效果很好。如果有任何问题,请发布您的链接。 请记住,此解决方案会破坏边框折叠功能。 @totymedli 值得注意。解决方案可能是从所有单元格中删除顶部和左侧边框,但第一个 in row 和 col 除外:th:not(:first-child), td:not(:first-child) border-top: 0 none; tr:not(:first-child) th, tr:not(:first-child) td border-left: 0 none; 如何让表体水平滚动?【参考方案2】:

David Bushell 在这里提供了解决方案和实现:http://dbushell.com/demos/tables/rt_05-01-12.html

诀窍是在表格行上使用display: inline-block;white-space: nowrap; 在表体上。

【讨论】:

【参考方案3】:

您可以使用&lt;th&gt; 作为行中的第一个单元格。 这是一个小提琴:http://jsfiddle.net/w5nWG/


@vishesh 所以你想在 DOM 准备好之后转置你的表格?试试这个http://gist.github.com/pgaertig/2376975

$(function() 
    var t = $('#thetable tbody').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('td').length;
    var cell, next, tem, i = 0;
    var tb= $('<tbody></tbody>');

    while(i<rows)
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols)
            next= r.eq(cell++).find('td').eq(0);
            tem.append(next);
        
        tb.append(tem);
        ++i;
    
    $('#thetable').append(tb);
    $('#thetable').show();

【讨论】:

@vishesh 所以你想在 DOM 准备好之后转置你的表格?试试这个gist.github.com/pgaertig/2376975【参考方案4】:
 <table>
     <tr><td>1</td></tr>
     <tr><td>2</td></tr>
     <tr><td>3</td></tr>
 </table>



 table  border-collapse: collapse; 
 table tr  display: block; float: left; 
 table tr tr display: block; float: left; 
 table th, table td  display: block; border: none; 

【讨论】:

【参考方案5】:

AFAIK,没有神奇的解决方案可以改变这种情况。 至于旋转(90 度),那很可能会将整个桌子转到一边,类似于将一张纸旋转 90 度后的样子,这不是您想要的(我认为?)。

如果这是可能的(并且是现实的),我建议在 HTML 本身中更改它。


正如 cmets 中所指出的,这里没有建议,所以这里有一个使用 jQuery 的基本 javascript 替代方案 [即使这不是您想要的]。在不了解您的经验的情况下,我花时间评论所有内容以确保您了解代码的作用。

// Change the selector to suit your needs
$('table').each(function()
    var table       = $(this), // Reference each table in the page
        header      = $('thead', table), // Reference the table head
        headings    = []; // Set an array for each column

    // If the table doesn't have a header, use it's footer for column titles
    if(!header.length)
        header = $('tfoot', table);
    // If there's no header nor footer, skip to the next table
    if(!header.length)
        continue;

    // Loop each heading to get the header value
    $('th', header).each(function()
        var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
        headings.push(heading); // Add heading value to array
    );

    // Make sure the content is wrapped in a tbody element for proper syntax
    if(!$('tbody', table).length)
        table.wrapInner('<tbody></tbody>');

    // Set counter to reference the heading in the headings array
    var x = 0;

    // Loop through each row in the table
    $('tbody tr').each(function()
        var row     = $(this),
            label   = headings[x];

        // Add the heading to the row, as a <th> for visual cues (default: bold)
        row.prepend('<th>'+label+'</th>')

        // Move to the next value in the headings value
        x++;
    );
);

【讨论】:

这不能回答问题。只提出了一个建议,这显然不是问题所要求的。 @totymedli 我添加了一个 javascript sn-p 来解决您的评论;但是,我仍然不知道旋转表格的 CSS 选项。【参考方案6】:

试试这个

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
      <th>column5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

css:

table, td, th 
  border: 1px solid red;   


thead 
  float: left;   



thead th 
  display: block;   
  background: yellow;


tbody 
  float: right;   

【讨论】:

这是一个普通的水平表 您只是将标题排列成一列并将其浮动到右侧。似乎是一个未完成的解决方案。【参考方案7】:

也许这个链接没有帮助:rotate a table 90 degrees 这个也不会:http://www.w3.org/TR/html401/struct/tables.html

否则,您可以试试这个,有其他用户建议(拒绝和否决):

table 
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

这听起来很傻,但是,这并不比不知道“非常基本”的 HTML 4 表格模型更糟糕。

【讨论】:

这是一个可怕的解决方案。它旋转所有内容,甚至是文本。该问题要求转置而不是旋转。 您对错位讽刺的投反对票已被接受。但我不会删除这个。

以上是关于带有垂直行的 HTML 表格的主要内容,如果未能解决你的问题,请参考以下文章

Java JLabel中HTML表格单元格中的文本垂直居中

带有垂直文本的冻结标题的表格

垂直对齐表格中的图像和文本

修复了带有水平滚动条和垂直滚动条的标题表

水平和垂直可滚动的大表格

带有水平和垂直标题和标题的表格