Combining extensions… not working

  • Resolved waxler

    (@waxler)


    8 years, 3 months ago

    Hi Tobias,

    I’m I’ve been using Tablepress for quite some time now and recently got a new website design which created a few new problems for Tablepress. I’m trying to keep it clean and useful but not having any luck.

    I just learned you’re offering extensions that might solve the problems I have but can’t seem to make them work.
    I definitely intend on donating you some money if we make this work.

    I’m trying to combine the following extensions: Responsive Tables, DataTables FixedColumns,DataTables FixedHeader

    By following the instructions I change the table code to: “[table id=1 responsive=scroll datatables_fixedheader=top datatables_fixedcolumns_left_columns=2 /]”

    So I want it to be scrollable to the right, on mobile as well, to have fixed 2 left columns and fixed top row/header. Is it even possible to incorporate all that?

    Plus I can’t seem to find right CSS coding to get rid of unnecessary white spaces between columns and rows.

    Please help.

    Here is how the table looks right now: https://headphonesaddict.com/best-underwater-bluetooth-headphones/

    • This topic was modified 8 years, 3 months ago by waxler.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Unfortunately, I’ll have to disappoint you here. Due to JS code that these Extensions use internally, they are not compatible and can not be used together.
    This is a drawback of the DataTables JS library, see https://datatables.net/download/compatibility for details.

    As for the spacing: All this seems to be coming from your theme’s JS file https://cdn.headphonesaddict.com/wp-content/themes/addict/js/app.js
    This is adding extra CSS classes to the table (actually to its wrapper element) which result in the styling that you are seeing now.

    Regards,
    Tobias

    Thread Starter waxler

    (@waxler)

    Thank you for your answer Tobias.

    So I’ll have to pick one extension and use it. According to your experience, which one will enable me to get the best user experience on desktop and mobile when rows are wider than the width of the content column?

    Can I hire you to do the editing for me?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    the Responsive Tables Extension will probably be the best.

    Unfortunately, I can not offer professional services for this at the moment, as I’m just too busy with my regular day job. Sorry.

    Regards,
    Tobias

    Thread Starter waxler

    (@waxler)

    Ok, I understand.

    One more question, with some CSS coding my designer stretched the width of the table to be wider than the width of the main content column. But now the spacing between columns in the table is skewed. There is a lot of white spaces in between columns which makes the table look bad.

    How can I get rid of the white spaces between column? Basically I’d want to “center align” all the columns just like you’d do it in a text editor.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    well, the extra space is the result of stretching the table, obviously.
    Center aligning is possible with CSS, e.g.

    .tablepress-id-123 thead th,
.tablepress-id-123 tbody td {
  text-align: center;
}

    Regards,
    Tobias

    Thread Starter waxler

    (@waxler)

    Thank you for your answer.

    What do I put instead “123” to make it for all tables?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    to achieve this for all tables, just remove the -id-123 part, i.e. use

    .tablepress thead th,
.tablepress tbody td {
  text-align: center;
}

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Combining extensions… not working’ is closed to new replies.