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

我正在尝试创建一个由RAILS以默认格式自动生成的表，以我希望的方式使用CSS查看它

---

也就是说，如果您查看了图像，我希望第三列显示为一行。这可以通过CSS实现吗

使用JavaScript，重新设置表的样式非常简单。假设您的表名为

yourtable

。选择表格，将最后一个单元格移动到新创建的行，并将该行插入当前行之后

由于要向表中添加行，请确保从表的末尾开始。如果将

用于（变量i=0；i=0；i--）{
var tr=document.createElement（“tr”）；
var td=行[i]。单元格[2]；
td.colSpan=“2”；
tr.appendChild（td）；
行[i].parentNode.insertBefore（tr，行[i].nextSibling）
}
}
window.onload=函数（）{
var table_id=[“您的表”、“另一个表”]；
对于使用JavaScript的（var i=0；i，对表重新排序非常简单。假设您的表名为
your table
。选择您的表，将最后一个单元格移动到新创建的行，并将该行插入当前行之后

因为要向表中添加行，请确保从表的末尾开始{
var tr=document.createElement（“tr”）；
var td=行[i]。单元格[2]；
td.colSpan=“2”；
tr.appendChild（td）；
行[i].parentNode.insertBefore（tr，行[i].nextSibling）
}
}
window.onload=函数（）{
var table_id=[“您的表”、“另一个表”]；
对于（var i=0；i作为一个学术练习，这里有一个纯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; 
}

作为一个学术练习，这里有一个纯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; 
}

请参见
当前，没有
colspan
（或
rowspan
）CSS等价物。没有JavaScript也不行。而且，我必须补充一点，我认为
表
本质上是一个错误的工具，用于个人详细信息列表…David，我应该使用java脚本或CSS编辑帖子以获得解决方案吗？你能给我建议一些关键字来寻找这样的需求吗？Thanks@DavidThomas在我看来，这就像是表格数据。。。现在是（三列），然后是；它是表格。在首选版本中，它看起来更像一个个人详细信息列表……目前，没有
colspan
（或
rowspan
）CSS等价物。没有JavaScript也不行。而且，我必须补充一点，我认为
表
本质上是一个错误的工具，用于个人详细信息列表…David，我应该使用java脚本或CSS编辑帖子以获得解决方案吗？你能给我建议一些关键字来寻找这样的需求吗？Thanks@DavidThomas在我看来，这就像是表格数据。。。与当前一样（三列）那么是的；它是表格格式的。在首选版本中，它看起来更像是个人详细信息的列表……这是一个不错的解决方案。这种方法唯一的缺点是，表格元素不再支持
垂直对齐
，因为您已经向表格元素添加了
display:block
。看起来不错，但是，当我增加列数时对于另一个表，它看起来很混乱，我尝试再添加两个td和第n个孩子（4），第n个孩子（5）。但不起作用。有什么快速解决方法吗？@Vivek-该原则应该可以扩展到其他列。您希望第4列和第5列如何显示在布局上？@Alohci解决了它。谢谢大家的帮助：）很好的解决方案。此方法唯一的缺点是，表元素不再支持垂直对齐，因为您已向表元素添加了
display:block
。看起来不错，但是，当我增加另一个表的列数时，它看起来很混乱，我尝试再添加两个td和第n个子项（4），第n个子项（5）。但不起作用。有什么快速解决方法吗？@Vivek-这个原则应该可以扩展到更多的列。您希望第4列和第5列如何显示在您的布局上？@Alohci解决了这个问题。谢谢大家的帮助：）