Column Width & Vertical Alignment

  • Resolved nofxbam

    (@nofxbam)


    13 years, 3 months ago

    Hi,

    I’ve been reading the forums for tips and have tried a few methods but I’m still having trouble with column width and vertical alignment. It could be my theme is interfering but I wanted to check. Here is the page (table under computer image): http://www.agilebts.com/zoho-crm-test/

    Here is the custom css I’m using:

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #ffffff;
    }

    .tablepress-id-1,
    .tablepress-id-1 tr,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
    border: none;
    }

    .tablepress-id-1 .column-1 td {
    vertical-align: middle;
    width: 25px;
    padding: 0;
    }

    .tablepress-id-1 .column-2 td {
    vertical-align: middle;
    width: 50px;
    padding: 0;
    }

    .tablepress-id-1 .column-3 td {
    vertical-align: middle;
    width: 25px;
    padding: 0;
    }

    .tablepress-id-1 .column-4 td {
    vertical-align: middle;
    width: 50px;
    padding: 0;
    }

    Are you seeing anything wrong with the code I have listed above?

    http://ww.wp.xz.cn/extend/plugins/tablepress/

Viewing 5 replies - 16 through 20 (of 20 total)
1 2
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 3 months ago

    Hi Nick,

    first: No need to post your “Custom CSS”, I can see that in the page 🙂

    I mean to paste that line into the previous piece of code that I had given you.

    So, instead of

    .tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-2 .row-5 td,
.tablepress-id-2 .row-7 td {
  vertical-align: bottom;
  width: 50%;
}

    use

    .tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-2 .row-5 td,
.tablepress-id-2 .row-7 td {
  vertical-align: bottom;
  width: 50%;
  padding: 0;
}

    By the way, you can greatly reduce the complexity of your code: Whenever the part in brackets {} is the same for several blocks, you can combine their “selectors” (the part before the { as a comma-separated list. That should make things much shorter.
    For example,

    .tablepress-id-4 .row-1 td {
background-color: #fff;
}

.tablepress-id-4 .row-3 td {
background-color: #fff;
}

.tablepress-id-4 .row-5 td {
background-color: #fff;
}

.tablepress-id-4 .row-7 td {
background-color: #fff;
}

    can be shortened to

    .tablepress-id-4 .row-1 td,
.tablepress-id-4 .row-3 td,
.tablepress-id-4 .row-5 td,
.tablepress-id-4 .row-7 td {
  background-color: #fff;
}

    Regards,
    Tobias

    nycnml

    (@nycnml)

    13 years, 3 months ago

    Wow, great. REALLY great. Thanks. Tip about consolidating = awesome.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 3 months ago

    Hi,

    no problem, you are very welcome! 🙂
    Always glad when I can help!

    Best wishes,
    Tobias

    Daria Offin

    (@dariafa)

    12 years, 11 months ago

    Hello Tobias,

    Great plugin!

    But I have a problem vertically aligning a photo in the table – i have added in the CSS:

    }

    .tablepress thead th {
    border-spacing: 5px 0;
    vertical-align: middle;
    }

    And it aligns the text but not the photos. I don’t know why. Please advise.

    This is the page example: http://dev.islandoutpost.com/community-first/

    Thank you!

    Daria

    Thank you

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    12 years, 10 months ago

    Hi,

    thanks for your post, and sorry for the late answer. As I was on vacation, I didn’t have a chance to reply earlier.

    Now, as you seem to have discussed this in http://ww.wp.xz.cn/support/topic/images-do-not-vertically-align-but-text-does I’m assuming that this problem was fixed for you?

    Regards,
    Tobias

Viewing 5 replies - 16 through 20 (of 20 total)
1 2

The topic ‘Column Width & Vertical Alignment’ is closed to new replies.