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 | . |
...
總結
以上是生活随笔為你收集整理的html单元格上下拆分代码,在HTML / CSS中如何垂直拆分表格单元格（特殊版本）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 源代码托管网站BitBucket
- 下一篇： 牛客网嵌入式软件工程师面试题（一）