WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded centering, row height, column width etc (38 posts)

  1. StephCat
    Member
    Posted 4 years ago #

    Hi! So you know, I'm using Thesis for my theme.

    I'm using different tables to simply organize text & pics on several different pages.

    I'm having problems with getting them to do what I want. I've unchecked using the javascript libaries. I've tried entering (cutting & pasting & editing as needed) pertinent code in the plugin options custom css area.

    On this page http://www.sunsetcat.com/my-patterns/ I'm trying to get the pics (all 150x150 thumbnails) to be adjacent to each other. I've gotten rid of the borders already, and changed my background color. I was hoping to do it by changing the column width & row heights to 150 px but it's not working. Also, I'd like the table to be centered...

    On this page, http://www.sunsetcat.com/my-patterns/socks/, I can't change the first row's background color. I put in the code, but the color refuses to change. The first row is not a header row (that box is unchecked).

    On this page, http://www.sunsetcat.com/about/stephannie/, I'd just like to center it.

    thanks!

  2. TobiasBg
    Member
    Posted 4 years ago #

    Hi Stephannie,

    thanks for your comment.

    I had a look at your site and it looks like that you have mixed a few things here, especially CSS, some Shortcodes and HTML.

    This is not possible and is the reason for some of your issues.
    I cleaned it up and simplyfied it a bit.
    I also added a few things, so maybe issues are already be fixed with the new code. Please replace your complete code from the "Custom CSS" textfield with this:

    .wp-table-reloaded-id-1, .wp-table-reloaded-id-2, .wp-table-reloaded-id-3, .wp-table-reloaded-id-4 {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }
    
    .wp-table-reloaded-id-3, .wp-table-reloaded-id-4 {
      width: auto!important;
      margin: 10px auto 15px!important;
      text-align:center!important;
      vertical-align:middle!important;
    }
    
    .wp-table-reloaded-id-4 td {
      width: 150px!important;
      height: 150px!important;
    }
    
    .wp-table-reloaded td {
      background-color: #FDF5E6;
    }

    Please let me know, if it works.

    Best wishes,
    Tobias

  3. StephCat
    Member
    Posted 4 years ago #

    Thanks! it works. Much more concise.

    The only thing is, I'm still getting a wider space btwn table rows 2&3 compared to the other rows on the pattern page. Not sure why it's doing that.

    thank you so much!!!

  4. TobiasBg
    Member
    Posted 4 years ago #

    Hi,

    great! Good to hear that! :-)

    That remaining space is inserted, because you have a line-break after the HTML for the image in the second cell of the second row of that table.
    If you navigate to that cell, click behind the last > character and press "Del" on your keyboard a few times, and then save your changes, the space should vanish :-)

    Best wishes,
    Tobias

  5. StephCat
    Member
    Posted 4 years ago #

    got it! I thought I'd caught all those, ugh!

    thank you so, so much!

  6. mattbovell
    Member
    Posted 4 years ago #

    Tobias,

    Like Stephanie, I want to control the height of the rows in my table but it is not working. Here is the code I put in the custom CSS box:

    .wp-table-reloaded-id-2 td {
      height: 50px!important;
    }

    I've changed the height property to several different numbers but I see no change.

    I'm not using the plugin's default CSS style sheets because I need transparent cells and that was the only way I could get that.

    My theme is 2010 Weaver and my site is http://www.vellgroup.com/what-we-offer/

    Any idea what I am doing wrong?

  7. TobiasBg
    Member
    Posted 4 years ago #

    Hi Matt,

    you are basically "suffering" from the same behavior that Stephanie experienced:
    You pasted HTML code for a form into a table cell. That HTML code however contains line breaks. And those line breaks get transformed into <br/> HTML tags, when the table is displayed. And that results in a lot of vertical space used.

    So, to fix that, you will need to paste the HTML code for the form/button without any line breaks (except the ones that will be done by the browser because the textfield is to small to show everything in one line).

    Does that make sense?

    Best wishes,
    Tobias

  8. mattbovell
    Member
    Posted 4 years ago #

    Tobias, many many thanks! In fact I deleted the height CSS specification figuring the elimination of the line breaks would do it alone and I was right.

    Note to others: if you are unsure where the line breaks actually are, copy and paste the cell contents into notepad and you can then see where new lines occur where they don't need to.

    By the way, is there away I can get transparent background on cells without bypassing your default CSS stylesheets?

  9. TobiasBg
    Member
    Posted 4 years ago #

    Hi,

    yes, thanks for the heads up!

    For the transparent background: In any case you would need to add some "Custom CSS" commands. Which one exactly depends on where the table background comes from, or whether for example your theme adds one, too (some themes do). The best thing to find out is to use "Firebug", an extension for Firefox.

    Regards,
    Tobias

  10. parfumio
    Member
    Posted 4 years ago #

    1. my table 1 is in page http://www.parfumio.ro/
    issues:
    - The table shows differently in Firefox, Opera, IE, Chrome (?!):

  11. in Opera it is centered (that is ok) and the column width seems to be variable but the widths for the last 4 columns should be less
    in Firefox the table is not centered (not ok) while the column widths are ok, more for the firs 2 columns and les for the last 4 columns
    in Chrome - not centered, column width is ok
    in IE - centered and the column width is ok
  12. So, what I want is the table to be centered in all browsers and that I can control/modify the column widths the way I want to (variable for the first 2 columns and fixed for the last 4 columns.

    2. my table 2 is in page http://www.parfumio.ro/shop-parfumuri/
    As far as centering is concerned, the same behavior.
    As far as column width, I would like it to be fixed

    The point is I don't really understand how that Custom CSS field from the Frontend Options works. I'm not sure how can you give different styles to different tables on your site.
    And can you be sure it will be behave the same in all the browsers?

    Other questions:
    - can I change the highlight color for when hovering a row?
    - can I highlight only one cell when hovering over it?
    - how can I change the border color or remove the border?

    By the way, congratulations for your great work on this plugin! It is THE greatest table plugin, I've tried using many other plugins but it was impossible to obtain a decent table, all had different faults or annoying limitations.
    Besides, your plugin is a great solution for presenting a simple gallery of thumbnails or pictures on a page. Then, by using html I can link each thumbnail to a corresponding page.
    In other 2 famous plugins for picture galleries I couldn't simply link the thumbnails to different pages or the thumbnail were different in size, etc. Very annoying.
    I wasn't hoping to be able to add a decent gallery but surprinsingly a table plugin helped me. Maybe you should present this in your plugin descriprion so that people know it.

    So, congratulations again for this great plugin and also for helping us all with our support issues.

  • parfumio
    Member
    Posted 4 years ago #

    1. my table 1 is in page http://www.parfumio.ro/
    issues:
    - The table shows differently in Firefox, Opera, IE, Chrome (?!):

    • in Opera it is centered (that is ok) and the column width seems to be variable but the widths for the last 4 columns should be less
    • in Firefox the table is not centered (not ok) while the column widths are ok, more for the firs 2 columns and les for the last 4 columns
    • in Chrome - not centered, column width is ok
    • in IE - centered and the column width is ok

    So, what I want is the table to be centered in all browsers and that I can control/modify the column widths the way I want to (variable for the first 2 columns and fixed for the last 4 columns.

    2. my table 2 is in page http://www.parfumio.ro/shop-parfumuri/
    As far as centering is concerned, the same behavior.
    As far as column width, I would like it to be fixed

    The point is I don't really understand how that Custom CSS field from the Frontend Options works. I'm not sure how can you give different styles to different tables on your site.
    And can you be sure it will be behave the same in all the browsers?

    Other questions:

    • can I change the highlight color for when hovering a row?
    • can I highlight only one cell when hovering over it?
    • how can I change the border color or remove the border?

    By the way, congratulations for your great work on this plugin! It is THE greatest table plugin, I've tried using many other plugins but it was impossible to obtain a decent table, all had different faults or annoying limitations.
    Besides, your plugin is a great solution for presenting a simple gallery of thumbnails or pictures on a page. Then, by using html I can link each thumbnail to a corresponding page.
    In other 2 famous plugins for picture galleries I couldn't simply link the thumbnails to different pages or the thumbnail were different in size, etc. Very annoying.
    I wasn't hoping to be able to add a decent gallery but surprinsingly a table plugin helped me. Maybe you should present this in your plugin descriprion so that people know it.

    So, congratulations again for this great plugin and also for helping us all with our support issues.

  • TobiasBg
    Member
    Posted 4 years ago #

    Hi,

    those issues happen, because your theme also contains styling commands for tables. This makes it hard to have everything consistent for all browsers, because some of them interpret things differently.

    As a start, try adding this to the "Custom CSS" textfield:

    .wp-table-reloaded {
      width: 100%!important;
    }

    This might already fix the centering and column widths issues.

    For question 2, please see my FAQ page at http://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/, especially questions "How can I change the color used for highlighting hovered rows?" and "How do I remove the borders from a table?".

    Best wishes,
    Tobias

  • parfumio
    Member
    Posted 4 years ago #

    Hi Tobias

    I've implemented that CSS immediately when you gave it to me and it worked great but I forgot to say thank you...

    So, thanks a lot :)!
    Now I have more than 50 tables on my blog and they are excellent, just what I needed.

    Now, another question:
    The CSS you gave me above, I guess it forces the width to be 100% of the page for all the tables.
    But I added an exception, for example for my table 86, like this:

    .wp-table-reloaded-id-86 {
    width: 60%!important;
    }

    It is shown here http://www.parfumio.ro/ at the bottom of the page and unfortunately it's not centered anymore.

    I looked in my css stylesheet and i found some lines reffering to tables, for example:

    .article table, table.article
    {
    border-collapse: collapse;
    margin: 1px;
    width:auto;
    }

    and some other lines related to tables:

    .article table, table.article .article tr, .article th, .article td
    {
    background-color:Transparent;
    }

    .article th, .article td
    {
    padding: 2px;
    border: solid 1px #8C9B94;
    vertical-align: top;
    text-align:left;
    }

    .article th
    {
    text-align:center;
    vertical-align:middle;
    padding: 7px;
    }

    I thought I should add horizontal-align:middle like this
    .article table, table.article

    {
    border-collapse: collapse;
    margin: 1px;
    width:auto;
    horizontal-align:middle;
    }

    but it didn't work. Is there something else I can do?

    I also looked in your FAQ and I added the code for removing the border like this

    .wp-table-reloaded-id-86 {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;
    }

    but it doesn't work... :(. The border is still there.

    I also wanted to align different columns of a table in different ways and I added this for table 10 (shown here http://www.parfumio.ro/chanel/):

    .wp-table-reloaded-id-10 td
    {
    text-align: center;
    }
    .wp-table-reloaded-id-10 .column-1, .wp-table-reloaded-id-10 .column-2, wp-table-reloaded-id-10 .column-3
    {
    text-align: left;
    }

    and it works great.

    But what if I want this to happen for all my table (with one exception)
    Shouldn't I add the following?

    .wp-table-reloaded td
    {
    text-align: center;
    }
    .wp-table-reloaded .column-1, .wp-table-reloaded .column-2, wp-table-reloaded .column-3
    {
    text-align: left;

    I did so but it didn't work... Did I make a mistake?

    (Sorry for this long long post.. )

  • TobiasBg
    Member
    Posted 4 years ago #

    Hi,

    I'm a little bit confused by all the CSS code you posted, so I went ahead and created some code that should fix all of those issues that I understood. Can you try that code and then repeat your question for those issues that remain?

    For centering the table:

    .wp-table-reloaded-id-86 {
      margin: 0 auto!important;
    }

    For removing the borders (it is also on the td's not just the table itself):

    .wp-table-reloaded-id-86, .wp-table-reloaded-id-86 td {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    In the code for the alignment, you forgot a . before the last .wp-table-reloaded, so:

    .wp-table-reloaded td {
      text-align: center;
    }
    .wp-table-reloaded .column-1, .wp-table-reloaded .column-2, .wp-table-reloaded .column-3 {
      text-align: left;
    }

    And another thing: In your CSS, there is a line

    <div style="width:100%; text-align:center;">[table id=86 /]</div>

    That needs to be removed! This is HTML and a Shortcode and it can not stand in the Custom CSS!

  • parfumio
    Member
    Posted 4 years ago #

    Hi Tobias

    I used the pieces of code and they worked fine.
    That's what happens when you're not familiar with php, css and other.. acronyms :). You try different things and you screw up :). I mean that's what I did.

    Thanks a lot
    Larry

  • pcohen15
    Member
    Posted 4 years ago #

    Hi Tobias:

    I, too, am having some trouble with cell widths not "sticking" when I make the CSS changes suggested in your FAQ. On this page http://scottsdalepopwarner.org/tackle-2/team-8/shockers-players/ I have created a simple table for a youth football team. I have specified the cell widths with the following code per your suggestion:

    .wp-table-reloaded-id-4 .column-1 {
    width: 150px;
    }
    .wp-table-reloaded-id-4 .column-2 {
    width: 160px;
    }
    .wp-table-reloaded-id-4 .column-3 {
    width: 100px;
    }
    .wp-table-reloaded-id-4 .column-4 {
    width: 50px;
    }
    .wp-table-reloaded-id-4 .column-5 {
    width: 60px;
    }
    .wp-table-reloaded-id-4 .column-3 {
    text-align: center;
    }
    .wp-table-reloaded-id-4 .column-4 {
    text-align: center;
    }
    .wp-table-reloaded-id-4 .column-5 {
    text-align: center;
    }

    The centering of the text is working fine, but as you can see the widths are not as I wanted.

    I am using the inFocus theme; please let me know what else you might need to help fix this.

    Thank you!
    Peter

  • TobiasBg
    Member
    Posted 4 years ago #

    Hi,

    if you add

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

    to the CSS, your width commands should work. In the current setting, the table gets a total width of 100%, which then extends the cells beyond your widths.

    Best wishes,
    Tobias

  • pcohen15
    Member
    Posted 4 years ago #

    Of course, and this should come as no surprise to you, you are correct ;-) Thanks, so much. Great plug-in, great support.

  • Gibelgab
    Member
    Posted 3 years ago #

    Hi.

    Changed my mind about this issue.

    No help needed this time :-)

  • TobiasBg
    Member
    Posted 3 years ago #

    Hi,

    there is indeed some other CSS messing with your images, and it's coming from your theme. The theme gives an additional margin to all images.

    Additionally, you have forgotten a period (.) in front of the wp-table-reloaded-id-1 and therefore it does not have any effect at all. However, it is not even necessary, because of the good default setting that you now already have!

    So, to fix your layout,
    1.) remove all current "Custom CSS",
    2.) then paste in this short piece of CSS:

    .wp-table-reloaded-id-1 td {
      padding: 0!important;
    }
    
    .wp-table-reloaded-id-1 img {
      margin: 0!important;
    }

    Best wishes,
    Tobias

  • Gibelgab
    Member
    Posted 3 years ago #

    wow!

    That was a quick reply.

    Althoug I changed my mind about the layout, I learned something about periods!

    Thank's alot Tobias.

  • drakeblogs
    Member
    Posted 3 years ago #

    Hi Tobias,

    I've got the table widths to what I want, but I need it center (I've tried 80% to 50% and it never moves) in the page and not to have the big space between the at the bottom of column 1 and 2.

    The site is: http://batsonsonline.com

    Thanks.

  • TobiasBg
    Member
    Posted 3 years ago #

    Hi,

    to center the table, add this "Custom CSS" on the "Plugin Options" screen:

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

    Regarding the "big space" you mention, I'm not sure what you mean. Can you explain that a little more?

    Regards,
    Tobias

  • drakeblogs
    Member
    Posted 3 years ago #

    Thanks Tobias, that fixed the problem and by doing that I figured out my spacing issue. I had to make the height larger. Do you know anything about widget's in the footer by any chance? I can't #2 and #3 to line up correctly.

    Thanks again.

    http://batsonsonline.com

  • TobiasBg
    Member
    Posted 3 years ago #

    Hi,

    good to see that it worked!

    Regarding the footer widgets: Sorry no. I suggest asking the developer of the widget (or if it belongs to WordPress Core) your theme's developer.

    Best wishes,
    Tobias

  • drakeblogs
    Member
    Posted 3 years ago #

    One more question - how do I make them all align to the bottom of the cell? I tried valign: bottom;

    Thanks again.

  • TobiasBg
    Member
    Posted 3 years ago #

    Hi,

    that would be

    vertical-align: bottom;

    (valign is the HTML notation, not CSS.)

    Regards,
    Tobias

  • Gibelgab
    Member
    Posted 3 years ago #

    Hi Tobias.

    Any idea why I can't make the table align to the left with the above text here?:

    http://www.produktionsteknik.dk/wp/?page_id=18

    Thank's in advance :-)

  • TobiasBg
    Member
    Posted 3 years ago #

    Hi,

    that's coming from a margin and some padding that your theme is adding to cells and images. They are actually left aligned, but pushed back to the right by the margin.

    To remove some of it, try this "Custom CSS":

    .wp-table-reloaded-id-2 td, .wp-table-reloaded-id-2 td img {
      margin: 0!important;
      padding: 0!important;
    }

    Best wishes,
    Tobias

  • Gibelgab
    Member
    Posted 3 years ago #

    Hi Tobias.

    Thank's but it didn't change anything.

    I will try to make changes in the theme.

    Best regards
    John

  • 12

    Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags