使用CSS重新排列表数据

Question

我有一个表格，其中每一行都是一个小部件，其中包含备用css类.odd＆amp; .even并且每个小部件内部有四列。

结构如下：

有没有办法按照以下格式重新排列这些数据并将css应用到<td>？

这是我的小提琴代码：Fiddle Demo

Answer 1

当然尝试添加以下CSS：

tr td {
    display: block;  
    margin-left: 170px;
}

这是一个小提琴：http://jsfiddle.net/2sTjp/14/

希望这有帮助。

Answer 2

对表格列使用inline-block。

.odd td,.even td{padding-left:80px;display:inline-block;}

DEMO

Answer 3

Demo

.test td {
    display: inline-block;
    float: right;
    text-align: left;
    width: 50%;
}

Answer 4

您可以通过提供float:right并使用一些width来达到预期效果。检查 DEMO 。

td{word-break:break-word; float:right; width:100px; }