[Plugin: WP-Table Reloaded] styling font properties by column

imjeffw
(@imjeffw)

12 years, 2 months ago
I am having difficulty in styling just one column of my table. below is the code I tried.
```
.wp-table-reloaded-id-2 .column-1 td {
font-size: 20px;
font-weight: bold;
}
```
I thought I was wrong once. Turns out I was mistaken.

http://wordpress.org/extend/plugins/wp-table-reloaded/

Viewing 5 replies - 1 through 5 (of 5 total)

(@tobiasbg)

Hi,

thanks for your question.

When styling columns, the extra td in the CSS selector is wrong/too much, as the .column-N class already applies to the td. Adding a td is only necessary for rows.

Please try again with

.wp-table-reloaded-id-2 .column-1 {
  font-size: 20px;
  font-weight: bold;
}

Best wishes,
Tobias

Thread Starter

imjeffw

(@imjeffw)

12 years, 2 months ago

Hi Tobias, veilen dank! Es funcioniert! (I sure the spelling and grammar is off but I try …everyday)

I encountered a new issue though one that I fear will be more difficult to solve. I am using table id specific CSS styling but found that several text-align properties are being carried over to columns in different tables. I’m running on a local server so all I can do is provide the CSS.

here is one example-
The problem is with column 4 between table 16 & 17
the text-align-right from table 17 is being applied to column 4 of table 16. If I code the align left with !important, it fixes the problem in table 16 but then aligns column 4 of table 17 to the left.
CSS below

.wp-table-reloaded-id-16 .column-2, .column-4, .column-6 {
     text-align: left;
}
.wp-table-reloaded-id-17 .column-1, .column-4 {
     text-align: right;
}

below is the complete table styles (If you know a better way to code the multiple selectors I would welcome your suggestions)

another problem is with column 3 of tables 2-15. It’s not centering, it is alining to the right due to the alignment properties from table 17

Complete CSS

.wp-table-reloaded, .wp-table-reloaded td, .wp-table-reloaded th {
   border: none!important;
   border-collapse: collapse!important;
   border-spacing: 0px!important;
}
.wp-table-reloaded, .wp-table-reloaded td {
    height: 50px;
    vertical-align:middle;
}
.wp-table-reloaded th {
background-color: #F4F4F2!important;
}
.wp-table-reloaded th, .wp-table-reloaded .sorting {
   font-size: 9px!important;
   font-style:italic!important;
   font-weight:lighter!important;
   color: #333;
}
.wp-table-reloaded tr td {
  background-color: #F4F4F2!important;
}
.wp-table-reloaded-id-1 .column-1 {
     text-align: right;
}
.wp-table-reloaded-id-1 .column-2 {
     text-align: left;
}
.wp-table-reloaded-id-2 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-3 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-5 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-6 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-7 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-8 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-9 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-10 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-11 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-12 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-13 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-14 .column-1, .column-2, .column-3,
.wp-table-reloaded-id-15 .column-1, .column-2, .column-3 {
     text-align: center;
}
.wp-table-reloaded-id-2 .column-1,
.wp-table-reloaded-id-3 .column-1,
.wp-table-reloaded-id-5 .column-1,
.wp-table-reloaded-id-6 .column-1,
.wp-table-reloaded-id-7 .column-1,
.wp-table-reloaded-id-8 .column-1,
.wp-table-reloaded-id-9 .column-1,
.wp-table-reloaded-id-10 .column-1,
.wp-table-reloaded-id-11 .column-1,
.wp-table-reloaded-id-12 .column-1,
.wp-table-reloaded-id-13 .column-1,
.wp-table-reloaded-id-14 .column-1,
.wp-table-reloaded-id-15 .column-1 {
      font-size: 15px;
      font-weight: bold;
}
.wp-table-reloaded-id-2 .column-4,
.wp-table-reloaded-id-3 .column-4,
.wp-table-reloaded-id-5 .column-4,
.wp-table-reloaded-id-6 .column-4,
.wp-table-reloaded-id-7 .column-4,
.wp-table-reloaded-id-8 .column-4,
.wp-table-reloaded-id-9 .column-4,
.wp-table-reloaded-id-10 .column-4,
.wp-table-reloaded-id-11 .column-4,
.wp-table-reloaded-id-12 .column-4,
.wp-table-reloaded-id-13 .column-4,
.wp-table-reloaded-id-14 .column-4,
.wp-table-reloaded-id-15 .column-4 {
     text-align: left;
}
.wp-table-reloaded-id-16 .column-1, .column-3, .column-5 {
     text-align: right;
}
.wp-table-reloaded-id-16 .column-2, .column-4, .column-6 {
     text-align: left;
}
.wp-table-reloaded-id-17 .column-1, .column-4 {
     text-align: right;
}
.wp-table-reloaded-id-17 .column-3, .column-6 {
     text-align: left;
}
.wp-table-reloaded-id-17 .column-2, .column-5 {
     text-align: center;
}

TobiasBg

(@tobiasbg)

12 years, 2 months ago

Hi,

yes, the spelling on the German is slightly off, but it’s still cool that you tried 🙂

The reason for your problems basically is the way you try to combine the CSS for several columns. In CSS, it is not possible to write

.wp-table-reloaded-id-16 .column-2, .column-4, .column-6

to have something applied to columns 2, 4, and 6. You’ll always need to use the full selector, in this example:

.wp-table-reloaded-id-16 .column-2,
.wp-table-reloaded-id-16 .column-4,
.wp-table-reloaded-id-16 .column-6

Do you see what I mean and how it works?
If you adjust your selectors like this, everything should be working as expected, and no code should spill over.

And now, that you seem to have several tables that have the same structure or base styling, there’s a simpler way than having to copy the CSS for that table ID:
So-called “Extra CSS classes, which can really help in reducing the amount of CSS. Please take a look at http://wordpress.org/support/topic/plugin-wp-table-reloaded-is-there-a-way-to-shorten-this-css where I explain how to use this.

Best wishes,
Tobias

Thread Starter

imjeffw

(@imjeffw)

12 years, 2 months ago

Ich wohne im Berlin seit 3 jahre aber mine Deutsch ist ganse slechet!
You’re 2 for 2 thanks for the quick reply. The Extra CSS class addition is a great touch. thanks for the suggestion.

I read the documentation on CSS selectors but I’m a little unclear on how to target the descriptions of the tables with the extra class or how to incorporate the <span> tag. Would you please provide an example? I setup my extra class as, “wp-table-reloaded-music”

Thank You,
Jeff

TobiasBg

(@tobiasbg)

12 years, 2 months ago

Hi Jeff,

the descriptions of the tables are actually not affected by the “Extra CSS class”, as the “Extra CSS class” only applies to the <table> element, while the description (in a <span> tag) is located outside of the table.
So, the table description can not be influenced by an “Extra CSS class”, but only like

.wp-table-reloaded-table-description {
  font-weight: bold;
}

for all of them, or

.wp-table-reloaded-table-description-id-123 {
  font-weight: bold;
}

for a single one.
(There is however a filter hook ‘wp_table_reloaded_print_description_css_class’ that could be used to add some like an extra class to the description <span>.)

Regards,
Tobias

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘[Plugin: WP-Table Reloaded] styling font properties by column’ is closed to new replies.