html单元格上下拆分代码,在HTML / CSS中如何垂直拆分表格单元格（特殊版本）

我有一张这样的表：

我想拆分单元格，看起来就像这样。

我有一个奇怪的第n个孩子分离，我也想保持颜色与示例图片中的颜色一样。

我该怎么做？

编辑：

到目前为止我的css表：

table.sty {

background: #000;

border-collapse: separate;

box-shadow: inset 0 1px 0 #000;

margin: 0px;

text-align: center;

float: left;

display: inline-box;

width: 1%;

}

table.sty th {

border-left: 1px solid #555;

border-right: 1px solid #777;

border-top: 1px solid #555;

border-bottom: 1px solid #333;

box-shadow: inset 0 1px 0 #999;

color: #000;

padding: 1px 1px;

position: relative;

text-shadow: 0 1px 0 #000;

}

table.sty td {

border-right: 1px solid #000

border-left: 1px solid #e8e8e8;

border-top: 1px solid #616161;

border-bottom: 1px solid #292929;

padding: 6px 15px;

position: relative;

transition: all 300ms;

background: #727272;

color: #292929;

}

table.sty tr {

background: #292929;

}

table.sty tr:nth-child(odd) > td:first-child

{

background:#292929;

border-color: #000;

color: #45ADFD;

}

table.sty tr:nth-child(even) > td:first-child

{

color: #FFB5F9;

border-color: #000;

background: #292929 ;

}

table.sty tr:first-child td:nth-child(odd)

{

background:#000;

border-color: #000;

color: #45ADFD;

}

table.sty tr:first-child td:nth-child(even)

{

color: #fff;

border-color: #000;

}

table.sty tbody:hover td {

color: transparent;

text-shadow: 0 0 3px /*#D9070B*/;

}

table.sty tbody:hover tr:hover td {

color: #C7C7C7;

text-shadow: none;

}

在HTML中我添加了分隔符列，如：

content

.

content

.

content

.

...