Empty columns creating gaps

  • Resolved kentonfox

    (@kentonfox)


    7 years, 11 months ago

    Hi,

    Hope you can help. I am using a form to ask users to choose images. This form is then imported via CSV into TablePress, where the selected field values are the image URLs. This means I can import in bulk and then use the TablePress filter shortcode, across several pages, to show the selected images for each user.

    I have no idea if this is the best way to do this, but it seemed logical??

    My question is …

    I have a large table, which will only show the data in specific rows, using the filter shortcode. This works really nicely.

    Not every column (on a chosen row) has data in it. The data when included is simply a url to the media library used to show an image. When there are images in consecutive columns, it works well. When there is a gap in the table of 3 or 4 columns where no images are included. The actual table on the page includes a gap. I suspect this is the padding of the empty cells????

    How can I show the results of a filtered row, without gaps when there is no data in many of the columns.

    Thanks for your time

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    If I understand correctly, you might indeed just have to remove the inner padding of the table cells. This can e.g. be done with CSS code. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-123 th,
.tablepress-id-123 td {
  padding: 0;
}

    Just change the 123 to the correct table ID.

    Regards,
    Tobias

    Thread Starter kentonfox

    (@kentonfox)

    Hi Tobias,

    I did see that work around on the forum, but doesnt work for this.
    Here is a screenshot of the table. You will see the column with no img (ecotricity). This is showing up as a large gap on the webpage, when ideally I would like it hidden on the page when the cell is empty.

    https://postimg.org/image/6yvhvesxh/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter kentonfox

    (@kentonfox)

    This is the actual table online.

    https://postimg.org/image/c73x4w7j9/

    Thread Starter kentonfox

    (@kentonfox)

    Sorry, this is the correct table. 6 empty columns is creating the gap, not 1 empty column.

    https://postimg.org/image/mvaf5fjef/

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    please post the actual link to the page with the table. Just a screenshot is not enough, as I can not investigate the applied CSS then.

    Regards,
    Tobias

    Thread Starter kentonfox

    (@kentonfox)

    Hi Tobias,

    Thanks for your help. I just wanted to lock the site down, apart from this 1 page, so you can have a look

    https://introbears.com/profiletest/

    From what I can see your original code suggestion very nearly worked

    .tablepress-id-123 th,
    .tablepress-id-123 td {
    padding: 0;
    }

    But it still leaves a little padding, perhaps outer padding??? Im not sure

    It sounds small but my finished table may have 50 empty cells, so even 1px for each cell will make a large gap in the scrolling row.

    Thank you again for your help.

    Paul

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Paul,

    one more idea: There is a CSS3 pseudo-selector for empty HTML elements. This might help here:

    .tablepress-id-123 th:empty,
.tablepress-id-123 td:empty {
    display: none;
}

    This should hide all empty cells in that table.
    (Note that it might be possible that older versions of Internet Explorer don’t understand this command.)

    Regards,
    Tobias

    Thread Starter kentonfox

    (@kentonfox)

    Morning Tobias,

    You are a star. That works perfectly.
    Thanks for your help.

    Paul

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Empty columns creating gaps’ is closed to new replies.

Tags