Reduce padding/spacing between columns i

  • Resolved kfranck

    (@kfranck)


    8 years ago

    Tobias:
    I would like to reduce the spacing between columns in a table on my home page. In addition, I would like to reduce the padding between the rows. How can I do this?

    The site is https://bladeelectionresults.com. The table I want to alter is the “The Race for President” table.

    Thanks in advance.
    Kurt

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter kfranck

    (@kfranck)

    Tobias:

    I did some searching around the Support site and found this CSS that improved the spacing some. Will this work, or do you have other suggestions?

    .tablepress-id-9 .column-2 {
    width: 40%;
    }

    .tablepress-id-9 .column-3 {
    width: 60%;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    this should be the best option here.

    Regards,
    Tobias

    Thread Starter kfranck

    (@kfranck)

    Tobias:

    Thank you.

    I have am having a problem now with column 1 and column 2 in other tables. Please look at the “Lucas County Issues” table. The verbiage in Column 1 is too wide.

    Suggestions on how to fix that table and other tables with long wording?

    Also, if I have other tables with the same problem, what should the first line of the code be? If the tables are 12, 13, 14, should the first line be:

    .tablepress-id-121314 .column-1 {

    Thanks,
    Kurt

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    for those tables with the long wording in the first column, you’d also need to add a CSS column widths declaration.

    To apply a setting for multiple tables at once, the correct way is a comma-separated list, i.e.

    .tablepress-id-12 .column-1,
.tablepress-id-13 .column-1,
.tablepress-id-14 .column-1 {

    Regards,
    Tobias

    Thread Starter kfranck

    (@kfranck)

    Tobias:

    I’m still not get it right on my end. Below is a code I used, but long wording in the first column still does not wrap enough. Suggestions?

    Here is the CSS code I added:
    .tablepress-id-11 .column-1,
    .tablepress-id-12 .column-1,
    .tablepress-id-15 .column-1,
    .tablepress-id-17 .column-1 {
    width: 50%;
    }

    Suggestions?

    Thanks,
    Kurt

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Kurt,

    the width of 50% is obeyed, so you’ll simply have to reduce the value some more, if you want more wrapping, i.e. more narrow columns.

    Regards,
    Tobias

    Thread Starter kfranck

    (@kfranck)

    Tobias:

    I changed the width of the first column to 70%, which is perfect. If I want the second column to go further to the right, what do you suggest I change the percentage for column 2?

    Thanks,
    Kurt

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Kurt,

    that won’t matter, as that column will always stretch to the full width.
    Instead, you could change the left-padding in the second column, with something like

    .tablepress-id-11 .column-2,
.tablepress-id-12 .column-2,
.tablepress-id-15 .column-2,
.tablepress-id-17 .column-2 {
  padding-left: 30px;
}

    or you could maybe right-align the text, with

    .tablepress-id-11 .column-2,
.tablepress-id-12 .column-2,
.tablepress-id-15 .column-2,
.tablepress-id-17 .column-2 {
  text-align: right;
}

    Regards,
    Tobias

    Thread Starter kfranck

    (@kfranck)

    Tobias:

    Perfect. Thanks so much.
    Kurt

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Reduce padding/spacing between columns i’ is closed to new replies.