如何並排顯示三個子表？

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