1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Cell Padding in Tables

Discussion in 'Website Customization' started by David Burdick on Sep 30, 2024.

  1. David Burdick

    By:David Burdick-  Sep 30, 2024
    Community Member

    Joined:
    Sep 19, 2023
    Messages:
    23
    Likes Received:
    6
    Gender:
    Male
    Location:
    Flower Mound, TX, United States of America
    When creating stories for our club, I am trying to use tables to format my posts. Essentially, I am trying to give the post a little life and variation. I create a table, 1 row, 3 columns. Setup padding and spacing for the table. I add images into each cell. When the story is published, there is not any spacing between the cells. What is happening?

    I have setup the following:

    Vertical Align: Middle
    Horizontal Align: Center
    Cell Padding: 50
    Cell Spacing: 10
    Each Cell Width is: 33%
    Table Align: Center
    Table Width: 90%

    When I post the story, it always loses my padding for the images and clumps them all together. Can someone
    share with me why this is happening? And possible how to fix this issue.
    Rotary Story Issue.png
     
  2. Zach

    By:Zach-  Oct 4, 2024
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    781
    Likes Received:
    110
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hi David,

    Thank you for your patience as I had to do a little digging to confirm what exactly is going on here. Working with our team the reason your cell values are not being respected, is that they're being overridden by our standard CSS rules for the theme you are using. I would generally really not suggest using tables to display content, as they work very poorly with mobile devices and how they're displayed.

    While I know it would not be displayed exactly how you want it, it would be better to add the images just directly next to each other, and let users browsers sort out how they will be displayed. You have a lot of control over how they display just by controlling the size of the images. Images are consider an "inline block", which allows them to sit next to each other as long as there is space to do so. Its also important to remember that more than just desktop users visit and view our websites. When viewed on a mobile device, those images will be shrunken down even further to try to scale the content on the page to be visible within the phones display area. It makes it very hard to see the content of the images.

    You should be able to get something pretty close to what you have now by setting good sizes on your images and removing the tables. For example a width of 250 for the square-ish portraits, and a width of 175 on the tall images. I took your story copy onto one of our test sites and was able to transform it into a very similar concept without using tables, but I understand not everyone has those skills. Here is a screenshot from the desktop view.

    upload_2024-10-4_14-46-34.png

    In the Mobile View, it looked like this

    upload_2024-10-4_14-46-44.png

    Now for the original
    upload_2024-10-4_14-46-58.png

    With all of this said, it is something that we're discussing on how we can improve how customers enter content into the website, and get it formatted so it looks great on the website. I will also see if we can ensure that we do a better job of not overriding the properties being set within the content area, which should also help your original issue.
     
Top