在表格中对齐td

时间:2014-11-08 09:02:08

标签: javascript html css

在下表中,当动态构建表时,Item6如何与Item2对齐?是否有纯粹的css或css3方法来实现这一目标?

当前表

enter image description here

必填表

enter image description here

<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>

小提琴:http://jsfiddle.net/jxvf9arL/1/

2 个答案:

答案 0 :(得分:1)

正确使用colspan属性并删除display:table;的{​​{1}}规则,它正在弄乱表格布局:

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

答案 1 :(得分:0)

你应该将colspan添加到tds。 因此,如果最大列为N,并且当前行具有m列,则应将colspan = n-m添加到行中的最后一个单元格。

也是,tr stylying中的东西

table tr{
    display:table;
    width:100%;   
    }

错了。     http://jsfiddle.net/jxvf9arL/7/ 会工作