Respomsive

  • Resolved Arkpra

    (@arkpra)


    9 years, 3 months ago

    Hello.
    How do I handle this css to activity in TABLEPRESS

    @media screen and (max-width: 650px) { 
.responsive tr {
 display:block; 
 border-bottom: 1px solid #333;
}
.responsive td { 
 display:block;
 position:relative; 
 padding-left:50%; 
} 
.responsive td:before { 
 content: attr(data-label); 
 position:absolute; 
 width:45%; 
 padding-right:5%;
 white-space:nowrap;
 left:8px;
 top:8px;
 font-weight:bold; 
}
.responsive thead tr { 
 position:absolute; 
 left:-9999px; 
}
}

    Regards.
    Arkadiusz Pragier

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This topic was modified 9 years, 3 months ago by bdbrown.
    • This topic was modified 9 years, 3 months ago by bdbrown.
Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    You would have to prepend the .tablepress selector, instead of that .responsive selector. Alternatively, you could add responsive as an “Extra CSS class” on the “Edit” screen of the table.

    Note that this will not work to full satisfaction, due to the line
    content: attr(data-label);
    as TablePress does not add the table head content there.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Respomsive’ is closed to new replies.