javascript - 如何并排显示三个子表？

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