組織図の向きを左から右に変更します

現在の向きではなく、左から右に表示するように、下の図の向きを変更する必要があります。 col spanの代わりにrow spanを使用してこれを行うことは可能ですか？トップからボトムへのアプローチでは、すべてスパンを使用して左から右に行えると仮定していたので、列スパンを使用して完了しましたが、開始することはできません。組織図の向きを左から右に変更します

私の現在のコードCSSは次のとおりです。HTMLのボディに

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; 
}

私の現在のコードは次のとおりです。

<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