如何將特定的tr跳到正確的位置？

Question

我有數據表usng rowgrouping插件。我想跳轉組內的行到右側。

簡單地說：.group-item類TRs應該移動讓我們說10px的權利。怎麼做？

我試過display：block和margin-left：10px，但是打破了列寬。

Answer 1

由於HTML表格的特性，在HTML <tr>上跳轉是不可能的。你將不得不改變結構。

選項1，巢新表

<style> 
    .subTable { 
     margin-left: 10px; 
    } 
</style> 

<table> 
    <tr> 
     <td> 
      <table class="subTable"> 
       <tr> 
        <td></td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

方案2是使用一些其他類型的結構，並模擬表一看：

<style> 
    .jump-over { 
     position: relative; 
     left: 10px; 
    } 
</style> 

<div class="table"> 
    <div class="row"> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
    </div> 
    <div class="row jump-over"> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
    </div> 
    <div class="row"> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
     <div class="span1"></div> 
    </div> 
</div> 

其他的CSS這應該是簡單，受您的個人設計支配。你可以使用一個網格框架來爲你做行和列，但我不會試圖使它響應，因爲這會破壞表模擬。

以上兩個選項都不會保留原始表格的列寬度;子表將根據其內容擁有自己的列寬，div必須明確設置寬度。 還有另一個非常難看的選項，我不建議這樣做：可以通過插入額外的<td>作爲所討論的行的第一個孩子來完成，但是父表的所有以前的第一個孩子必須將col-span設置爲2（其下的每個嵌套表+1）。你可以看到爲什麼這是一個壞主意。

聲明：這是未經測試的代碼，僅用於說明技術。