Styling

  • Resolved andyward75

    (@andyward75)


    6 years, 11 months ago

    Hi there.

    I want to have a table witha heading row of Day, then Open, CLose, Open , Close
    The first row should have Monday in column 1 and then a colspan of 4 with these 4 being centred and it stating the word “Closed all day”

    The remaing rows (Tuesday to Sunday) should have the opening and closing times respectively.
    The heading row needs to be all centred. Row 1 is to be as I described above. Clomun 1 is entirely left aligned for the body (not the head) and I would also like the column to be slightly wider.

    I have tried the following CSS – it is tablepress-id-4

    .tablepress-id-4 thead th {
    text-align: center;
    }

    tablepress-id-4 .column-1 {
    text-align: left;
    }

    tablepress-id-4 .row2 .column-2,
    tablepress-id-4 .row2 .column-3,
    tablepress-id-4 .row2 .column-4,
    tablepress-id-4 .row2 .column-5 {
    text-align: center;
    }

    tablepress-id-4 .column-2,
    tablepress-id-4 .column-3,
    tablepress-id-4 .column-4,
    tablepress-id-4 .column-5 {
    text-align: center;
    }

    and I have #colspan# in columns 2 through 5 of row 1 of the body (which is row 2 of the table).

    I am getting the thead all centred as I wish.
    I am getting the column 1 all left aligned as I wish in the body.
    The colspan appears to work but it is not being centred across the four columns
    Columns 2 through 5 on table rows 2 though 8 are not being centred.
    And I haven’t figured out how best to wide column one so that it fits on one line.

    MAny Thanks for any help you can give.

    • This topic was modified 6 years, 11 months ago by andyward75. Reason: Identify the table

    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)

    6 years, 11 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Please try this “Custom CSS” instead of what you have right now for this table:

    .tablepress-id-4 tbody td,
.tablepress-id-4 thead th {
  text-align: center;
}

tablepress-id-4 .column-1 {
  text-align: left;
}

    Regards,
    Tobias

    Thread Starter andyward75

    (@andyward75)

    6 years, 11 months ago

    Excellent and many thanks for the help. That works as I wish it to.

    I wondered if you had any thoughts about making the leftmost column wider then the other 4 to prevent text wrapping_

    Kind Regards

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 10 months ago

    Hi,

    ah, my bad, totally missed that part of your question. Please try again with this:

    .tablepress-id-4 tbody td,
.tablepress-id-4 thead th {
  text-align: center;
}

tablepress-id-4 .column-1 {
  text-align: left;
  white-space: nowrap;
}

    In addition, please also add this to the top of your “Custom CSS”:

    .tablepress {
  table-layout: auto;
}

    Regards,
    Tobias

    Thread Starter andyward75

    (@andyward75)

    6 years, 10 months ago

    Perfect. Many thanks for your valuable assistance.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 10 months ago

    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 5 replies - 1 through 5 (of 5 total)

The topic ‘Styling’ is closed to new replies.