如何使用 CSS 使表格以自定义格式显示？

Question

我正在尝试制作一个由 RAILS 以默认格式自动生成的表格来查看我想要它使用CSS。

即，如果您查看了图像，我希望第三列显示为 row 。这可以通过 CSS 实现吗？

Answer 1

使用 JavaScript，重新设计表格的样式非常容易。假设您的表名为 your-table。选择表格，将最后一个单元格移动到新创建的行，然后将该行插入到当前行之后。

由于您要向表中添加行，因此请确保从表的末尾开始。如果您使用for(var i=0; i，您的页面将陷入无限循环。

Fiddle: http://jsfiddle.net/QP8ga/

function refactorTable(table){
    var rows = table.rows;
    for(var i=rows.length-1; i>=0; i--){
        var tr = document.createElement("tr");
        var td = rows[i].cells[2];
        td.colSpan = "2";
        tr.appendChild(td);
        rows[i].parentNode.insertBefore(tr, rows[i].nextSibling)
    }
}
window.onload = function(){
    var table_IDs = ["your-table", "another-table"];
    for(var i=0; i<table_IDs.length; i++) refactorTable(table_IDs[i]);
}

修改之前的代码支持多个表。小提琴显示了一张表的基本示例。

Answer 2

作为一项学术练习，这里有一个纯 CSS 解决方案。遗憾的是，它只能在正确支持现代 CSS 的浏览器中运行。不支持 IE。

th { 
    display:none; 
}

table, tbody, tr, td { 
    display:block; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    border : 0px solid black;
}

table { 
    border-width : 1px 1px 0px; 
}

td:nth-child(1) { 
    width :50%; 
    float:left; 
}

td:nth-child(2) { 
    width :50%; 
    float:left; 
    border-left-width: 1px;
}

td:nth-child(3) { 
    clear:both; 
    border-width: 1px 0px; 
}

请参阅http://jsfiddle.net/FjBdL/5/