Is there an elegant way to divide an HTML table cell into a grid of 9 (Bootstrap)

I want to embed several "directional" icons (arrows) into an up/down/left/right grid on a per row table to allow users to edit hierarchical data structures directly.

It seems either I have to use colspan=3 and rowspan=3 on all the other elements OR I have to do the table within a table route.

Is there another way?

Does Bootstrap have any supporting CSS to do this with span's and/or div's ?

I am building a generic solution that I can reuse as needed.

think like this:

x | U | x L | x | R x | D | x

except that the U, L, R and D are Font Awesome arrow icons indicating Up, Left, Right and Down respectively.

x | /\ | x <-| x. |-> x | \/ | x

Just ignore the x's...