我在我的网站上使用了表格单元格:
但正如你在图片中看到的那样:
移动视图看起来有点奇怪,所以我希望绿色现在不会水平显示,而且它的细胞位于彼此之下。
我已经检查过SO的几个答案,但可以理解。 在这里,我的小提琴:https://jsfiddle.net/Wosley_Alarico/y7wqj55p/2/
尝试将显示属性更改为继承,但没有发生任何事情:
tr{
display: inherit;
}
如何在单元格的顶部水平显示绿条? 希望我能说清楚。提前致谢
答案 0 :(得分:1)
你真的不应该使用这样的表。但如果你真的需要,你可以这样做:
@media(mind-width:992px){
tr, td {
display: block;
}
}
答案 1 :(得分:1)
请将此添加到您的CSS:
@media (max-width: 550px){
.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
width: 100% !important;
}
td, tr {
display: block;
}
p.rotate.column-second {
position: initial;
-webkit-transform: inherit;
transform: inherit;
-o-transform: inherit;
-moz-transform: inherit;
}
td.column {
width: inherit;
padding: 0 !important;
}
table img {
width: 100%;
}
.org-chart td {
padding-left: 0;
}
}