JSFiddle - React, Tailwind, and code Playground
by Sam Carleton
HTML
<TABLE border="0" cellSpacing="0" cellPadding="0" width="100%">
<TBODY>
<TR>
<TD vAlign="top" width="430" align="left">
<DIV class="navBar">
<DIV class="navBarRow">
<DIV style="width: 50%; float: left;" class="navBarCell select"><A href="">child 1.1</A></DIV>
<DIV style="width: 50%;" class="navBarCell"><A href="">child 1.2</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV class="navBarCell select"><A href="">solo 2</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV style="width: 33.3%; float: left;" class="navBarCell"><A href="">Child 3.1</A></DIV>
<DIV style="width: 33.3%; float: left;" class="navBarCell"><A href="">Child 3.2</A></DIV>
<DIV style="width: 33.3%;" class="navBarCell"><A href="">Child 3.3</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV class="navBarCell"><A href="">solo</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV class="navBarCell"><A href="">solo</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV class="navBarCell"><A href="">solo</A></DIV>
</DIV>
<DIV class="navBarRow">
<DIV class="navBarCell"><A href="">solo</A></DIV>
</DIV>
</DIV>
</DIV>
</TD>
<TD width="50"> </TD>
<TD rowSpan="9">
<DIV>
</DIV></TD></TR>
</TBODY></TABLE>
CSS
div.navBar
{
}
div.navBar a:link a:visited a:active a:focus { color: Black; }
div.navBar div.navBarRow
{
font-family:Arial, Helvetica, sans-serif;
font-size:1.15em;
font-weight:bold;
height: 44px;
1padding: 0.625em 0.625em 0.625em 0em;
background-color: #AFC5E3;
border-bottom:0.063em solid #dbe2f2;
1border-left: 0.75em solid #6699CC;
border-right: 0.063em solid #6699CC;
clear:both;
}
div.navBar div.navBarRow *.navBarCell
{
padding-left: 0.625em;
border-left: 0.75em solid #6699CC;
height: 44px;
}
div.navBar div.navBarRow *.navBarCell.select
{
background-color: #6699CC;
}