更改表的显示属性

Question

我在我的网站上使用了表格单元格：

但正如你在图片中看到的那样：

移动视图看起来有点奇怪，所以我希望绿色现在不会水平显示，而且它的细胞位于彼此之下。

我已经检查过SO的几个答案，但可以理解。 在这里，我的小提琴：https://jsfiddle.net/Wosley_Alarico/y7wqj55p/2/

尝试将显示属性更改为继承，但没有发生任何事情：

tr{
  display: inherit;
}

如何在单元格的顶部水平显示绿条？ 希望我能说清楚。提前致谢

Answer 1

你真的不应该使用这样的表。但如果你真的需要，你可以这样做：

@media(mind-width:992px){
    tr, td {
        display: block;
    }
}

Answer 2

请将此添加到您的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;
    }
}