如何並排顯示三個子表？

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 

這迫使表格彼此相鄰而不是在下方

然后確保已設置寬度，以便它們可以在頁面上彼此相鄰出現

像這個小提琴