javascript - 对齐表中的 td

Question

下表动态建表时Item6和Item2如何对齐？是否有实现此目的的纯 css 或 css3 方法？

当前表

必填表

<table class="qe">
<tbody>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td>Item3</td>
    </tr>
    <tr>
        <td>Item4</td>
    </tr>
    <tr>
        <td>Item5asfasfasf</td>
        <td>Item6</td>
    </tr>
</tbody>
</table>

fiddle :http://jsfiddle.net/jxvf9arL/1/

Answer 1

正确使用 colspan 属性并删除 table tr 的 display:table; 规则，这会扰乱表格布局:

table{
    width:500px;
    border:1px solid #000;
    table-layout:fixed;
}
table td{
    width:33%;
    border:1px solid #777;
    background:#eaeaea;
}

<table class="qe">
    <tbody>
        <tr>
            <td>Item1</td>
            <td>Item2</td>
            <td>Item3</td>
        </tr>
        <tr>
            <td colspan="3">Item4</td>
        </tr>
        <tr>
            <td>Item5asfasfasf</td>
            <td colspan="2">Item6</td>
        </tr>
    </tbody>
</table>