How to jump specific tr to the right? - html

Question

I have datatable table usng the rowgrouping plugin. I want to jump rows within groups to the right.
Simply said: .group-item class TRs should be moved lets say 10px to the right. How to do that?
I've tried display:block and than margin-left:10px, but that breaks column widths.

Answer 1

To put a jump on an html <tr> is impossible due to the nature of HTML tables. You'll have to change structure a bit.
Option 1, nest a new table
<style>
.subTable {
margin-left: 10px;
}
</style>
<table>
<tr>
<td>
<table class="subTable">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Option 2 is to use some other kind of structure and emulate a table look:
<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>
The other CSS for this should be simple and governed by your individual design. You could use a grid framework to do the row and columns for you, but I wouldn't try to make it responsive as this would break the table emulation.
Both of the previous options will not preserve the original table's column widths; the sub-table will have it's own column widths based on its content and the div's will have to have explicitly set widths to start with.
There is one other very ugly option that I do not recommend: it can be done by inserting an extra <td> as the first child of the row in question, but then all previous first children of the parent table will have to have col-span set to 2 (+1 for each nested table beneath it). You can see why that would be a bad idea.
Disclaimer: this is untested code and is meant merely to illustrate a technique.