更改表的显示属性

时间:2016-10-05 09:41:53

标签: jquery html css

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

enter image description here

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

enter image description here

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

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

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

enter image description here

tr{
  display: inherit;
}

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

2 个答案:

答案 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;
    }
}