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 ?