Question

我想在选定的TR下方并排显示三个子表。子行在父TR的第一列下方垂直对齐。我们可以将它们放在父TR的选定列下面吗？

这是代码

    function format ( data ) {
    // `d` is the original data object for the row
    return '<table class="floatLeft">'+
        '<tr>'+
        "<td class='hide-elem'></td>"+
        "<td class='hide-elem'></td>"+
        "<td class='hide-elem'></td>"+
        "<td class='hide-elem'></td>"+
            '<td>START</td>'+
            '<td>data.serviceHrs</td>'+
        '</tr>'+
        '<tr>'+
            '<td>CURRENT</td>'+
            '<td>data.serviceType</td>'+
        '</tr>'+
        '<tr>'+
            '<td>SERVICE INTERVAL</td>'+
            '<td>data.serviceHrs</td>'+
        '</tr>'+
        '<tr>'+
        '<td>ALERT Global.distance</td>'+
        '<td>data.serviceHrs</td>'+
    '</tr>'+
    '</table>'+ 

    '<table  class="floatRight">'+
    '<tr>'+
    "<td class='hide-elem'></td>"+
    "<td class='hide-elem'></td>"+
    "<td class='hide-elem'></td>"+
    "<td class='hide-elem'></td>"+
        '<td>START Global.distance</td>'+
        '<td>data.serviceHrs</td>'+
    '</tr>'+
    '<tr>'+
        '<td>CURRENT Global.distance</td>'+
        '<td>data.serviceType</td>'+
    '</tr>'+
    '<tr>'+
        '<td>SERVICE INTERVAL Global.distance</td>'+
        '<td>data.serviceHrs</td>'+
    '</tr>'+
    '<tr>'+
    '<td>ALERT Global.distance</td>'+
    '<td>data.serviceHrs</td>'+
'</tr>'+
'</table>';
}

Answer 1

你应该使用风格

display: inline-block

这会迫使表格彼此相邻而不是在

下面

然后确保设置了宽度，以便它们可以在整个页面中彼此相邻显示

像这样fiddle

如何并排展示三个儿童桌？

1 个答案: