Html 标记一个困难的导航表

需要帮助。我想不出解决办法。如何解决布局问题，或者有一个更好地创建类似表的选项：

当前解决方案：

.navTable{
显示：表格行组；
}
.导航测试{
显示：块；
}
.导航测试{
浮动：对；
}
.navTableBody{
字体大小：12px；
显示：表格行组；
}
1.可导航细胞{
浮动：左；
显示：表格单元格；
}
navTableRow先生{
显示：表格行；
边界塌陷：塌陷；
}
.navTableRow:第n个子项（1）.新建{
边框顶部：1px实心；
}
.navTableRow分区：第n个子项（1）。新建{
左边框：1px实心；
}
.navTableRow:第n个子项（1）.新建：悬停{
边框顶部：1px实心#f60；
}
.navTableRow分区：第n个子项（1）。新建：悬停{
左边框：1px实心#f60；
}
.新的{
颜色：#666；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：32px；
高度：32px；
显示：表格单元格；
边框底部：实心0.5px#666；
右边框：实心0.5px#666；
}
.新：悬停{
颜色：#666；
边框：实心0.5px#f60；
}
.新：参观{
颜色：#666；
}
.新的，最后的{
边框顶部：实心0.5px#666；
}
.new.info{
边框：实心0.5px#666；
}
.new.info:悬停{
颜色：#666；
边框：实心0.5px#f60；
}
.新文本{
颜色：#666；
}
.navTableRow:第n个子项（1）.当前{
边框顶部：1px实心#f60；
}
.navTableRow分区：第n个子项（1）.当前{
左边框：1px实心#f60；
}
.navTableRow:第n个子项（1）。当前：悬停{
边框顶部：1px实心#666；
}
.navTableRow分区：第n个子项（1）。当前：悬停{
左边框：1px实心#666；
}
.当前{
颜色：#f60；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：32px；
高度：32px；
显示：表格单元格；
边框底部：实心0.5px#f60；
右边框：实心0.5px#f60；
}
.当前：悬停{
边框：实心0.5px#666；
}
.当前：已访问{
颜色：#f60；
}
.current.info{
边框：实心0.5px#f60；
}
.current.info:悬停{
边框：实心0.5px#666；
}
.currentText{
颜色：#f60；
}
.当前的，最后的{
边框顶部：1px实心；
}
.navTableRow:第n个子项（1）。完成{
边框顶部：1px实心#f60；
}
.navTableRow分区：第n个子项（1）。完成{
左边框：1px实心#f60；
}
.navTableRow:第n个子项（1）.完成：悬停{
边框顶部：1px实心#666；
}
.navTableRow分区：第n个子项（1）。完成：悬停{
左边框：1px实心#666；
}
.完成{
背景色：#f60；
颜色：#fff；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：32px；
高度：32px；
显示：表格单元格；
边框底部：实心0.5px#f60；
右边框：实心0.5px#f60；
}
.完成：悬停{
颜色：#fff；
背景色：#666；
边框：0.5px实心#666；
}
.完成：已访问{
颜色：#fff；
}
.done.info{
边框：实心0.5px#f60；
}
.完成。信息：悬停{
颜色：#fff；
边框：实心0.5px#666；
}
.doneText{
颜色：#f60；
}
.完成.最后一次{
边框顶部：1px实心；
}
.testNavInfo{
宽度：100%；
高度：自动；
浮动：左；
填充：0；
列表样式：无；
字体大小：12px；
}
.testNavInfo p{
字体大小：13px；
颜色：#999；
}
.testNavInfo h2{
边缘底部：10px；
}
.navInfoCell{
显示：内联；
线高：10px；
}
.navInfoCell span{
宽度：100%；
字体大小：12px；
右侧填充：5px；
左：3倍；
}