Three table formatting questions

  • Resolved mish99

    (@mish99)


    4 years, 2 months ago

    Hi

    Thanks for your help so far with the above table. I have three problems left!

    1. I used the code from the FAQs to centre the table, but it still shows up on the left
    /*fixed width table and centre*/
    .tablepress-id-14 {
    width: auto;
    margin: 0 auto 1em;
    }
    2. I used the code you helped me with to rotate the column headings, but the last column wraps and looks ugly and the text is to the left of the cells and I would like it centred. I have tried some extra code to fix this!
    /*rotate header text*/
    .tablepress-id-14 thead tr {
    padding: 10px;
    height: 300px;
    text-align: middle;
    }

    .tablepress-id-14 thead th {
    vertical-align: bottom;
    text-align: middle;
    }

    .tablepress-id-14 thead th span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    width: 20px !important;
    }

    3. Some of the rows are double height on smaller screens, so I would like to align the text in the middle (vertical) of the rows. I have tried this code.
    .tablepress-id-14 .column-2,
    .tablepress-id-14 .column-3,
    .tablepress-id-14 .column-4,
    .tablepress-id-14 .column-5,
    .tablepress-id-14 .column-6,
    .tablepress-id-14 .column-7,
    .tablepress-id-14 .column-8,
    .tablepress-id-14 .column-9,
    .tablepress-id-14 .column-10,
    .tablepress-id-14 .column-11,
    .tablepress-id-14 .column-12 {
    width: 100px;
    text-align: center;
    text-align: middle;
    }

    Just incase some other code is getting in the way, this is the rest of the CSS I have used for this table.

    /*first column and header colour*/
    #content .tablepress-id-14 thead th,
    #content .tablepress-id-14 tfoot th,
    #content .tablepress-id-14 .column-1 {
    background-color: #00b2b2;
    color: #ffffff;
    }

    /*border colour*/
    .tablepress-id-14 tbody td {
    border: 1px solid #005959 !important;
    }

    /*column widths*/
    .tablepress-id-14 .column-1 {
    padding: 10px;
    width: 350px;
    }

    I hope you can help ??

    m

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    1. With centering, do you mean to center the content in the cells? Centering the full table does not make sense, because it needs to be wide.

    2. Here, I would recommend to turn off the wrapping. For that, please add

    white-space: nowrap;

    to the CSS block that starts with

    .tablepress-id-14 thead th span {

    3. Please change

    text-align: middle;

    to

    vertical-align: middle;

    here.

    Regards,
    Tobias

    Thread Starter mish99

    (@mish99)

    wow, thank you

    1. Yes the whole table. I have fixed the width of each column and the table is smaller than a normal browser window – most of my audience use desktop. I have installed the responsive extension for mobile users.

    2. unwrapping solved half the problem. But the text has shot upwards and still isn’t centred on the column i.e. halfway between each column border.

    3. Perfect, thank you

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    for me, the table is not smaller than the browser window, actually…
    Can you please check again after uncheck the “Use DataTables” checkbox on the table’s “Edit” screen? It’s not needed here.

    2. That’s caused by the change from 3., actually. To fix that, please replace

    .tablepress-id-14 thead th {
    vertical-align: bottom;
}

    by

    .tablepress-id-14 thead th {
    vertical-align: bottom !important;
}

    Regards,
    Tobias

    Thread Starter mish99

    (@mish99)

    thank you

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Three table formatting questions’ is closed to new replies.