[Plugin: WP-Table Reloaded] Yet another width thread

[deini]

Hello, first of all thanks for your amazing work! I’m having a little issue while formatting my 2 column table, I want to change their width and I can change them independently, but whenever I try to do them to both I just cant achieve it.

Webpage HERE

.wp-table-reloaded-id-1 .column-1,
.wp-table-reloaded-id-1 .column-2 {
  width: 150px;
}

I’m pretty sure it’s a silly thing on my side but I need a little help.

Also how can I make my 5th row looks like my 1st one?

Thanks!

http://ww.wp.xz.cn/extend/plugins/wp-table-reloaded/

[Tobias Bäthge]

Hi,

at first, I suggest that you uncheck the “Use JavaScript library” on the “Edit” screen of the table, as you are not using its features.

Then, it could be necessary to add

.wp-table-reloaded-id-1 {
  width: auto !important;
}

To make the fifth row like the first, please try adding

.wp-table-reloaded .row-5 td {
  background-color: #E6EEEE;
  border: 1px solid white;
  padding: 4px;
  color: #3D3D3D!important;
}

Regards,
Tobias

[xericgarden]

Sorry… But none of this works for me. I’ve tried editing my table’s 2 columns’ widths to no avail. Even doing what you said above. The first row is a header row that is a span across both columns. Is this causing the inability to reduce my column widths? I am NOT a scripty person so am not totally following your instructions but am trying and have read the doc and faq pages.

There used to be examples (about six months ago, when I first used WP Table Reloaded), that seem to be gone now. It’s how I figured out how to color each cell, make bold particular cells, change font sizes, etc. Is there such a table with examples and instructions on how to implement in the PLUGIN OPTIONS Custom CSS panel?

Please be kind as I have no clue what I’m doing…

Here’s my script so far from the Custom CSS area on PLUGIN OPTIONS:
.wp-table-reloaded-id-4, .wp-table-reloaded-id-4 td, .wp-table-reloaded-id-4 th {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
.wp-table-reloaded-id-4 .column-1,
.wp-table-reloaded-id-4 .column-2 {
width: 100px;
}
.wp-table-reloaded-id-4 {
width: auto !important;
}

Like I said, I’ve never used the custom css before, have always put my code in for each individual cell. My biggest concern is I only have about 200-300px of room for my two column table and it’s way too wide right now. ( http://www.thevisiongroupltd.com/test-page-table-4/ )

Thank you in advance for your help with my questions.
xericgarden Kim.

[Tobias Bäthge]

Hi Kim,

don’t worry, we’ll find a way 🙂
It might be as easy as adding a missing } before the line

.wp-table-reloaded-id-4 .column-1,

If that does not help, can you please post the URL to the page with your table? The URL you posted does not work for me, as it likely is a private page?

Regards,
Tobias

[xericgarden]

Terribly sorry. My fault not taking it out of draft mode.

I really appreciate the help!! In the meantime, I’ll add the }.

Also, my question about example tables, are there any beyond what are on your website? I mentioned that’s how I figured the editing of individual cells within a table.

Thank you again!

[Tobias Bäthge]

Hi,

ok, that’s good 🙂

Now, please add

.wp-table-reloaded-id-4 {
  width: auto !important;
}

and uncheck the “Use JavaScript library” checkbox on the “Edit” screen of table 4.

About those example tables: I don’t have other example tables other than those on the plugin website, unfortunately. So, I’m not really sure where you used those to see how to style cells differently. There is however example CSS code for often used styling changes on the plugin website, on the FAQ page at http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/

Regards,
Tobias

[xericgarden]

Thanks Tobias! I had unchecked the “use javascript library” checkbox already per one set of instructions I read as a remedy for some of my issues. What does this next piece of CSS mean to the table look? I already have it in my Plugin CSS area.

I appreciate all your help.

One last item: Can I resize the height of a row? Also, multiple lines of text in a cell? and center the whole table?

Funny how the example is now MIA. It was very helpful when I first tackled this table plugin.

THANKS!!

[Tobias Bäthge]

Hi,

yes, you had indeed. I was looking at the table that the initial poster in this thread linked to… My bad.
From what I can see, all code is working as expected now in your table, which is good 🙂
The last piece I asked you to add will basically tell the table to resize itself according to the widths of the columns, instead of insisting of having its on width (kind of technical…).

Regarding your other questions: Instead of resizing, you’ll likely want to add “padding”, e.g. with

.wp-table-reloaded-id-4 td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

Or do you actually want to make the table head row not that high? Then you should remove all HTML code from it and just leave the text “Raise Your Vision’s Past Speakers” and add the CSS code

.wp-table-reloaded-id-4 th {
  text-align: center;
  color: #2d9ddd !important;
  font-size:14px;
  font-weight: bold;
}

That will do the same as your HTML code.

Multiple lines of text are as easy as pressing “Enter” in a cell and typing it in.

And to center the entire table, just add

margin: 0 auto !important;

below the line

width: auto !important;

Regards,
Tobias

[xericgarden]

Thank you so much, Tobias. This has helped a lot! Having each item of CSS explained makes it easier to know I will use them and then how to adjust as I get more experience.

One final question, which I think got lost in the rest of my table issues, was how to center the entire table on the wp page. (or adjust left or right) I tried basic commands to center, those commands in the tool bar for the page, but it’s still left justified. Can this be done? The page I’m placing the table on is two columns. It’s in the right of the two columns. I’d like it centered or right justified in that column for appearance sake. Any words/code of wisdom here?

Thank you again for your patience!
Kim

[Tobias Bäthge]

Hi Kim,

I posted the code for centering the entire table in the last sentence of my previous post 🙂
That will center the table in the page. I’m not sure about the two columns you mention though, as I can’t see nothing like that in the page.

Regards,
Tobias

[xericgarden]

Tobias, Thanks again for your reply.

I guess I thought the “centered” aspect of the code was the centering for within the individual cell. If you go to http://thevisiongroupltd.com/raise-your-vision/ you’ll see the table in the right column. It’s justifying itself to the left of the column (which obviously you can’t see the lines that mark the columns).

If you see something there to fix the alignment, let me know. I really appreciate your help!!

Kim

[Tobias Bäthge]

Hi Kim,

thanks for the new link. There I can see the two-column design that you mentioned 🙂
And now, to center the entire table in the right column (which is what you want, right?), just add

margin: 0 auto !important;

below the line

width: auto !important;

as I have mentioned above.

Regards,
Tobias

[xericgarden]

Thank you again, Tobias! Really appreciate all your help!

Now if only other designers were as helpful!!

Thank you thank you!
Kim

[Tobias Bäthge]

Hi,

no problem, you are welcome!

Best wishes,
Tobias