更改組織結構圖的方向從左到右

我需要更改以下圖表的方向，以便它從左到右顯示而不是當前方向的頂部到底部。是否可以通過使用行跨度而不是跨度來做到這一點。在頂部到底部的方法，所有使用列跨度完成，所以我假設從左到右可以使用行跨度完成，但我無法得到一個開始。更改組織結構圖的方向從左到右

我當前的代碼CSS是：

div.orgChart table { 
    width     : 100%; 
} 

div.orgChart tr.lines td.line { 
    width     : 1px; 
    height    : 20px; 
} 

div.orgChart tr.lines td.top { 
    border-top   : 1px solid black; /*dashed*/ 
} 

div.orgChart tr.lines td.left { 
    border-right   : 1px solid black; 
} 

div.orgChart tr.lines td.right { 
    border-left   : 0px solid black; 
} 

div.orgChart tr.lines td.half { 
    width     : 50%; 
} 


div.orgChart td { 
    text-align   : center; 
    vertical-align  : top; 
    padding    : 0px 2px; 
}

我在HTML體當前的代碼：

<div id='orgChartContainer'> 
<div id='orgChart' class='orgChart'> 
<table id='myTable' cellpadding='0' cellspacing='0' border='0'> 

<tr><td colspan='4'><div>node</div></td></tr> 

<tr class='lines'><td colspan='4'> 
<table cellpadding='0' cellspacing='0' border='0'><tr class='lines x'><td class='line left half'></td><td class='line right half'></td></table> 
</td></tr> 

<tr class='lines v'><td class='line left'></td><td class='line right top'></td><td class='line left top'></td><td class='line right'></td></tr> 

<tr> 
<td colspan='2'> 
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 2</div></td></tr> 
</table> 
</td> 
<td colspan='2'> 
<table cellpadding='0' cellspacing='0' border='0'><tr><td colspan='2'><div>node 3</div></td></tr></table> 
</td> 

</tr> 
</table> 
</div> 
</div>

來源

2016-10-06 Ajay Reddy