标记一个困难的导航表

Question

需要帮助。我想不出解决方案。如何解决布局问题，或者可以选择更好地创建类似的表：

source table

目前的解决方案：

＆＃13;

＆＃13;

GET _search/template
{
  "id": "test-json",
  "params": {
    "hostname": ["host-1", "host-2"]
  }
}

＆＃13;

.navTable {
    display: table-row-group;
}

.navTest {
    display: block;
}

.navTableTest {
    float: right;
}

.navTableBody {
    font-size: 12px;
    display: table-row-group;
}

.navTableCell {
    float: left;
    display: table-cell;
}

.navTableRow {
    display: table-row;
    border-collapse: collapse;
}

.navTableRow:nth-child(1) .new{
    border-top: 1px solid;
}

.navTableRow div:nth-child(1) .new{
    border-left: 1px solid;
}

.navTableRow:nth-child(1) .new:hover{
    border-top: 1px solid #f60;
}

.navTableRow div:nth-child(1) .new:hover{
    border-left: 1px solid #f60;
}

.new {
    color: #666;
    text-align: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    display: table-cell;
    border-bottom: solid 0.5px #666;
    border-right: solid 0.5px #666;
}

.new:hover {
    color: #666;
    border: solid 0.5px #f60;
}

.new:visited {
    color: #666;
}

.new.last {
    border-top: solid 0.5px #666;
}

.new.info {
    border: solid 0.5px #666;
}

.new.info:hover {
    color: #666;
    border: solid 0.5px #f60;
}

.newText {
    color: #666;
}

.navTableRow:nth-child(1) .current{
    border-top: 1px solid #f60;
}

.navTableRow div:nth-child(1) .current{
    border-left: 1px solid #f60;
}

.navTableRow:nth-child(1) .current:hover{
    border-top: 1px solid #666;
}

.navTableRow div:nth-child(1) .current:hover{
    border-left: 1px solid #666;
}

.current {
    color: #f60;
    text-align: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    display: table-cell;
    border-bottom: solid 0.5px #f60;
    border-right: solid 0.5px #f60;
}

.current:hover {
    border: solid 0.5px #666;
}

.current:visited {
    color: #f60;
}

.current.info {
    border: solid 0.5px #f60;
}

.current.info:hover {
    border: solid 0.5px #666;
}

.currentText {
    color: #f60;
}

.current.last {
    border-top: 1px solid;
}

.navTableRow:nth-child(1) .done{
    border-top: 1px solid #f60;
}

.navTableRow div:nth-child(1) .done{
    border-left: 1px solid #f60;
}

.navTableRow:nth-child(1) .done:hover{
    border-top: 1px solid #666;
}

.navTableRow div:nth-child(1) .done:hover{
    border-left: 1px solid #666;
}

.done {
    background-color: #f60;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    display: table-cell;
    border-bottom: solid 0.5px #f60;
    border-right: solid 0.5px #f60;
}

.done:hover {
    color: #fff;
    background-color: #666;
    border: 0.5px solid #666;
}

.done:visited {
    color: #fff;
}

.done.info {
    border: solid 0.5px #f60;
}

.done.info:hover {
    color: #fff;
    border: solid 0.5px #666;
}

.doneText {
    color: #f60;
}

.done.last {
    border-top: 1px solid;
}

.testNavInfo {
    width: 100%;
    height: auto;
    float: left;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.testNavInfo p {
    font-size: 13px;
    color: #999;
}

.testNavInfo h2 {
    margin-bottom: 10px;
}

.navInfoCell {
    display: inline;
    line-height: 10px;
}

.navInfoCell span {
    width: 100%;
    font-size: 12px;
    padding-right: 5px;
    padding-left: 3px;
}

＆＃13;

＆＃13;

＆＃13;

但由于上面的行没有边框，因此存在2.12,2.13线曲线的问题

result problem