TablePress Responsive does not re-size for phone and breaks out of content area

  • Resolved Debora Crosby

    (@debora-crosby)


    10 years, 8 months ago

    Hi Tobias,

    I have searched the forums and tried many things, however I can’t get my TablePress responsive table to stay within the main content area of the responsive theme.
    https://www.deboracrosby.com/s-vivo/hair

    If I can’t get this to work I won’t be able to use the plugin and it seems to be the best out there. I’m hoping you have some insight as to how to fix.

    I have checked to be sure I have activated the responsive plugin extension, and added the following short code to my post
    [table id=1 responsive=”all”/]

    I am using the following css:
    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #de7500;
    color: #000;
    }

    .tablepress .odd td {
    background-color: #e6941e;
    }

    .tablepress .even td {
    background-color: #ffa421;
    }

    .tablepress .row-hover tr:hover td {
    background-color: #f6cf93;
    }

    .tablepress {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-1 .column-1 {
    width: 100px;
    }

    .tablepress-id-1 .column-2 {
    width: 100px;
    }

    .tablepress-id-1 tbody td {
    font-family: Tahoma;
    font-size: 14px;
    color: #000;
    }

    Thanks in advance

    https://www.ads-software.com/plugins/tablepress/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Debora Crosby

    (@debora-crosby)

    Sorry, Now I am having a bigger problem:
    The entire table breaks with [table id=1 responsive=”all” /]

    I have tried [table id=1 responsive=”phone”/] and that did not work either. only the header showed, but the rest of the table disappeared.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The Responsive Tables Extension is not really helpful for your site here. It’s more suitable for tables with plain tabular data, but not for those that also have images in them or are used more for layout purposes.

    I therefore suggest that you turn off the Extension for the tables on this page again. Then, please remove this “Custom CSS”:

    .tablepress {
	width: auto;
	margin: 0 auto 1em;
}

    and add this additionally:

    .tablepress img {
	max-width: 100%;
}

    Regards,
    Tobias

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘TablePress Responsive does not re-size for phone and breaks out of content area’ is closed to new replies.

Tags