Support » Plugin: TablePress » space between columns

  • Resolved Joris van der Horst

    (@joris-van-der-horst)


    Hi,

    I created a 5 column table.

    The columns in the table have default no space between them and show like this:

    Column1Column2Column3Column4Column5

    But actually I need to show the columns with space between them like this:

    Column1 (space) Column2 (space) Column3 (space) Column4 (space) Column5

    Note is that left of column1 and right of column5 must be shown no space, so only between columns must be shown space.

    How can I add a space of certain pixels between the columns?

    Best regards,

    Joris

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    When I check your link, the columns do have space between them. So I guess you already found a solution to this?

    Regards,
    Tobias

    Thread Starter Joris van der Horst

    (@joris-van-der-horst)

    Hi,

    No I not found sollution yet.

    I just only created on homepage a table with 1 column and 1 row and put this table with same shortcode in 5 columns in widget area.

    You can see a table which belongs to my question with 5 column and 1 row here:

    Example page

    I need to know following:

    Question 1

    How to create space between columns like below layout?

    Column1 (space) Column2 (space) Column3 (space) Column4 (space) Column5

    Note is that left of column1 and right of column5 must be shown no space, so only between columns must be shown space.

    Question 2

    Now on mobile this table shows not responsive but must scroll horizontally to view all columns.

    How to show this table on mobile view responsive so it shows 1 column 100% width and 5 columns under eachotter vertically like below layout?

    Column1 (100% width)
    Column2 (100% width)
    Column3 (100% width)
    Column4 (100% width)
    Column5 (100% width)

    Best regards,

    Joris

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Joris,

    you could play around with the border-collapse and border-spacing CSS properties, plus adding some border lines. However, all this will be rather messy, and I don’t think it can fulfil your condition with the left and right side.
    The second question (responsiveness) could be possible with the stack mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/

    However, as you would in this case be using a table more for layout/style, instead of presenting tabular data, I would actually recommend against using a table. Instead, you should use other HTML elements (like <div> containers) with appropriate CSS and CSS Media Queries to achieve all this. This would not only be more modern, but it would also be better semantically.

    Regards,
    Tobias

    Thread Starter Joris van der Horst

    (@joris-van-der-horst)

    Hi,

    Thanks for your reply.

    I guess I will have to work like on homepage with 1 table with 1 row and 1 column like now is shown under the top slider on:

    http://www.betrouwbaarste-casino.nl

    Only a question about the responsive view on mobile phone about that.

    Now the table is not shown on the website width on mobile screen.

    See screenshot:

    https://snipboard.io/PqjFQD.jpg

    But actually I want the table to show on the width of the mobile screen like this:

    https://snipboard.io/AyGY7Z.jpg

    How can I show the single tables so they enlarge totally to the width of the website (see element of posts below the tables on mobile) so they show on the width of the mobile screen?

    Best regards,

    Joris

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for me, the small tables are shown with almost full width on small screens (just a bit of padding), when I look at http://www.betrouwbaarste-casino.nl/

    Regards,
    Tobias

    Thread Starter Joris van der Horst

    (@joris-van-der-horst)

    Hi,

    and what will be de right css code for this padding?

    Best regards,

    Joris

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    well, that padding is added to the HTML elements around the theme, so there’s nothing really that CSS for TablePress can do here…

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘space between columns’ is closed to new replies.