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

Question

我想制作一个由默认格式的RAILS自动生成的表格，以我希望使用CSS的方式查找。

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

Answer 1

使用JavaScript，restyling你的表很容易。我们假设你的表格被称为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/