CODEWITHSUNDEEP
jqueryhtmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3584

Changing the display properties of a table

I used table cell to this on my site:

enter image description here

But as you can see on the picture:

enter image description here

The mobile view looks a bit odd so I would like the green no now be displayed horizontally and it's cells underneath each other.

I have checked few answers from SO already but could understand properly. Here my fiddle: https://jsfiddle.net/Wosley_Alarico/y7wqj55p/2/

Tried changing the display properties to inherit but nothing much happens:

enter image description here

tr{
  display: inherit;
}

How can I make green bars be displayed horizontally on top of their cells? Hope I could make some sense. Thanks in advance

Upvotes: 2

Views: 44

Answers (2)

Elton Sousa
Elton Sousa

Reputation: 421

Please add this to your 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;
    }
}

Upvotes: 1

user6925499
user6925499

Reputation:

You really shouldn't use tables like this. But if you really have to, you could do:

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

Upvotes: 1

Related Questions