更改组织结构图的方向从左到右

我需要更改以下图表的方向，以便它从左到右显示而不是当前方向的顶部到底部。是否可以通过使用行跨度而不是跨度来做到这一点。在顶部到底部的方法，所有使用列跨度完成，所以我假设从左到右可以使用行跨度完成，但我无法得到一个开始。更改组织结构图的方向从左到右

我当前的代码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