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

Question

我正在尝试创建一个由RAILS以默认格式自动生成的表，以便以我想要的方式使用CSS。

即。如果您查看了图像，我希望第三列显示为一行。这可能通过CSS吗？

Answer 1

使用JavaScript，重新设置表格非常简单。我们假设您的表名为your-table。选择您的表，并将最后一个单元格移动到新创建的行，然后在当前行之后插入该行。

因为您要向表中添加行，所以请确保从表的末尾开始。如果您使用for(var i=0; i<rows.length; i++)，您的网页将会无限循环。

小提琴：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/