使用CSS展开呈现为表行的表格单元格以适合表格宽度

Question

Html 获取我的表格数据，每个列都呈现为表格行。

我需要将这个单元格扩展到表格的末尾，就像如果将td作为表格行的一部分添加而不是仅仅通过CSS改变HTML而扩展它。

<table border="0" cellpadding="0" cellspacing="0" class="tableStyle">
    <tr>
        <td class="column">
            Sample 1
        </td>
        <td class="column">
            Sample 2
        </td>
        <td class="column">
            Sample 3
        </td>
        <td class="column">
            Sample 4
        </td>
    </tr>
</table>

<style type="text/css">
    .column
    {
        width: 25%;
        background-color: Green;
        display: table-row;
    }
    .tableStyle
    {
        border: 1px solid red;
        width: 100%;
    }
</style>

预期结果

Answer 1

也许你可以使用宽度：100％并在.column上显示：table

http://jsfiddle.net/p8DDC/2/

.column
{
    width: 100%;
    background-color: Green;
    display: table;
}