I Can't Get Vertical Alignment To Work

Hi,

thanks for your question, and sorry for the trouble.

Instead of setting those CSS properties on the actual row, you will need to set them on the cells in that row, i.e. use

.tablepress-id-2 .row-1 td {

instead of

.tablepress-id-2 .row-1 {

By the way: You seem to trying to style that first row as a table header. You should therefore also tell the table that it has a header (for better semantics), by enabling the “Table Head” checkbox on the “Edit” screen of the table.

Regards,
Tobias

Thank you so much Tobias. My apologies – but I still must be doing something wrong.

You are correct: I had unchecked the “Header” option and was attempting to format a header myself – because I wanted to control it more directly.

I have now checked the header option and made (I think) the CSS change you suggest. The complete CSS is below. And as before – the table can be viewed here:
https://jimhconsulting.com/?p=673&preview=true

That vertical alignment doesn’t seem to be happening.

Thanks so much.

Jim

.tablepress-id-2 th,
.tablepress-id-2 td {
  border: 2px solid #dddddd;
}
?
.tablepress-id-2 .row-1 td {
  font-size: 16px;
  font-weight: bold;
  vertical-align: bottom;
}
?
.tablepress-id-2 .column-2 {
  text-align: center;
  width: 100px;
}
?
.tablepress-id-2 .row-2 .column-2 {
  font-size: 20px;
  color: #FF0000;
}

Hi,

no worries, you still have all freedom regarding the styling, even with “Table Head” being checked.
With that checkbox being enabled (and therefore slightly different HTML code), you’ll now just have to replace

.tablepress-id-2 .row-1 td {

with

.tablepress-id-2 thead th {

Regards,
Tobias

Tobias:

I have two words for you: YOU ROCK! ??

It now works.

I have a higher level question for you: I am new to things like CSS. I don’t quite understand with the various CSS help I’ve seen you provide how much of what can go into the CSS area is specific to the TablePress plugin vs generic CSS. If I want to learn more about things like the thead and th and td and etc. etc. etc. should I be learning more about CSS?

Thanks again. TablePress is really an awesome plugin.

Jim

Hi,

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

That CSS question is tricky to answer. One can certainly “survive” by just using/applying/modifying all the TablePress examples that are out there (e.g. in the TablePress FAQ at https://tablepress.org/faq/ and also in the Documentation at https://tablepress.org/documentation/ ), but a general understanding of CSS is certainly benefitial, depending on what you want to change later on. For that, some tutorials like https://www.htmldog.com/guides/css/beginner/ are definitely helpful.

Best wishes,
Tobias

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