WordPress.org

Ready to get started?Download WordPress

Forums

125

TablePress
[resolved] Table Width (125 posts)

  1. Wendy
    Member
    Posted 1 year ago #

    Hi, I have set up a table yet the width is too wide, how do I ensure that there is no padding in the cells and that it fits into the width allowable on my wordpress site. In Firefox the table clashes with the widgets on the side.

    Thanks
    Grant

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Grant,

    thanks for your question.

    Please post the link to the table in question, and I will try to make suggestions.
    Note, that it's not always possible to make a table fit, e.g. if the contents in the cell simply require a certain minimum width, due to their own width.

    Regards,
    Tobias

  3. Wendy
    Member
    Posted 1 year ago #

    Hi Tobias

    It seems to work fine in internet explorer but not in firefox
    http://www.wellandhealthy.com

    Thanks
    Grant

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link.

    It works for me in Chrome, but you are right, in Firefox, it causes trouble.
    To fix that, I suggest that you remove the padding, margin, and border around images in tables. To do that, please add

    .tablepress-id-1 td img {
      border: none;
      padding: 0;
      margin-bottom: 0;
    }

    to the "Custom CSS" textarea on the "Plugin Options" screen of TablePress.

    Regards,
    Tobias

  5. Wendy
    Member
    Posted 1 year ago #

    Thanks Tobias,

    That has reduced the spread slightly on Firefox. I may try and reduce the size of the graphics so they fit in properly.

    Thanks for you help.

    Regards
    Grant

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Grant,

    ah, my bad, there's a typo in my code above. "none" for the padding should be "0". I fixed that in my code above. Please try that again.
    Additionally, please remove all the other "Custom CSS" that you already have (to the set the column and table widths), as is not used anyway, due to the size of the images.
    Your "Custom CSS" should be

    .tablepress-id-1 td img {
      border: none;
      padding: 0;
      margin-bottom: 0;
    }

    and nothing else. You should then not have to reduce the image size by hand.

    Regards,
    Tobias

  7. Wendy
    Member
    Posted 1 year ago #

    Hi Tobias

    Thanks brilliant, it works fine now.

    Exellent support!!

    Regards
    Grant

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Grant,

    awesome, great to hear that this worked :-) Thanks for the confirmation.

    Best wishes,
    Tobias

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

  9. jimchicago
    Member
    Posted 1 year ago #

    Hi Tobias,

    I have migrated from WP-Table-Reloaded to TablePress and it's generally working fine for me. I've been able to change the column widths of this table but overall the table is still wider than I want it to be:
    http://www.themarketingquiz.com/retirement-plans

    How can I make the table's width equal (or very close to) the sum of the two column widths?

    Also, I would like to add a 1px border to the whole table and (if possible) give each column its own color instead of each row.

    I searched the plugin's FAQ and Documentation but have not found these answers . . . so thanks in advance for your help.

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question.

    At first, you'll want to disable the usage of the JavaScript library, by unchecking the "Use DataTables" checkbox on the table's "Edit" screen, instead of just unchecking the individual features.
    After that, you can use this "Custom CSS" to make the table smaller, i.e. to make it as wide as its contents:

    .tablepress-id-1 {
      width: auto;
    }

    To add a border around the cells, you can use

    .tablepress-id-1 thead th,
    .tablepress-id-1 tbody td {
      border: 1px solid #333333;
    }

    In order to give colors to the columns and not the row, you should at first decide, whether you want to use the "Alternating row colors" feature, as that makes things more complicated here.
    If you don't want it, just uncheck the corresponsing checkbox on the "Edit" screen. Then you can use this "Custom CSS"

    .tablepress-id-1 .column-1 {
      background-color: #ff0000;
    }
    .tablepress-id-1 .column-2 {
      background-color: #00ff00;
    }

    Regards,
    Tobias

  11. jimchicago
    Member
    Posted 1 year ago #

    Thank you, Tobias! Those CSS snippets certainly help. However, even after adding the first one you gave, only the first (L-hand) column in the table is the width I specified in this snippet:

    .tablepress-id-1 .column-1 {
    	width: 220px;
    }
    .tablepress-id-2 .column-2 {
    	width: 260px;
    }

    The second column seems to be collapsing to the width of the longest line of text in it. For that reason I have inserted a string of periods (............) to make the table the width I want it to be. But there must be a better way than this to get that table width (can you tell me what it is?):
    http://www.themarketingquiz.com/retirement-plans/

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jim,

    the column width of the second column is not changing because of the second part of the CSS has the wrong table ID, 2 instead of 1 :-)
    Please try again with

    .tablepress-id-1 .column-1 {
    	width: 220px;
    }
    .tablepress-id-1 .column-2 {
    	width: 260px;
    }

    With that, you won't need the .....

    Regards,
    Tobias

  13. jimchicago
    Member
    Posted 1 year ago #

    What a kind fellow you are . . . and how foolish I feel for (once AGAIN) not noticing the obvious! Yes, changing that one character made all the difference. Thank you Tobias, you certainly embody the spirit of this forum:
    http://youtu.be/jBDF04fQKtQ?t=6s

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! And don't worry, these small things happen to me all the time :-)
    Oh, and thanks for the song! :-)

    Best wishes,
    Tobias

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

  15. arrancscott
    Member
    Posted 1 year ago #

    Hi Tobias,

    I've read through the advice you've given the other members on here and implemented that in to my 'Custom CSS' field but the table width still hasn't adjusted and is clashing with my sidebar widgets. The website i'm working with is conference-call-providers.co.uk and i'm testing it on Firefox. The table is on the main page. (it's working fine with all other browsers)

    Any help greatly appreciated

    p.s - my id is table2 as well and i've also changed that with no luck.

    Thanks
    Arran

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Arran,

    thanks for your post.

    One reason for this might be how the Shortcode is inserted in the page. You probably used the Visual Editor. That unfortunately has the bad habit to make the HTML code to complex. Please switch to the "Text editor" tab on the page's "Edit" screen in the admin area, and check if the [table ...] Shortcode is on its own line, with an empty line before and after it.

    Then, it also appears that Firefox does not add a line break/word wrap in the "DIAL-OUT?" column, while other browsers do. Thus, please add a line break after the hyphen in that cell, manually, by just pressing "Enter" there.

    Regards,
    Tobias

  17. arrancscott
    Member
    Posted 1 year ago #

    Hi,

    Thanks, i've inserted the shortcode in the 'Text editor' tab and it's on it's separate line and i've added the line break after the hyphen. The line break has changed the width but it's just a tad too long.

    I'm wondering if the CSS in my theme is overriding the CSS in the Tablepress plugin? On Firefox i've right clicked on the table and clicked on the 'Inspect Element' tab and it seems if i cancel out everything from Tablepress nothing changes, so i'm wondering if the Pagelines theme is causing the problem? I've tested it on the default WordPress 2012 theme and in Firefox the table width is fine...

    Thanks
    Arran

  18. arrancscott
    Member
    Posted 1 year ago #

    Also just checked, it looks like the first two columns are being stretched, as the images look stretched compared to when you look in Chrome and Safari. Is there a way to adjust a particular column width?

  19. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for doing that! That helped already, and the HTML is already nicer :-)

    Well, your theme is defining the width of the images, indeed. But it's using relative (percentage) values, so that's no problem. Apparently, Firefox doesn't use that freedom to make the widths smaller, but chooses to increase the table width.
    The best way should thus indeed be to simply set a fixed width for that column. This is possible with "Custom CSS", as described in the TablePress FAQ. In your case, please try

    .tablepress-id-2 .column-2 {
      width: 80px;
    }

    Regards,
    Tobias

  20. arrancscott
    Member
    Posted 1 year ago #

    Yeah I figured out another way of doing it which could be of some help to other people. The image width for the 'conference now' and 'conference genie' were set to 120px by 20px (the width being 120px) In Chrome it automatically resized the images down to around 70px thus making the images smaller. However, in Firefox this didn't seem to be the case so these two images were increasing the size of the column.

    So to fix it all I did was resized the two images to how they appear in Chrome and that sorted it. Quick fix :)

    Thanks for your help and quick response Tobias!

    Arran

  21. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Arran,

    ah, yes, you are right, it was just that one image, actually. I guess Firefox gives precedence to the width attribute then, compared to the CSS command.

    Great to hear that this is fixed now :-)

    Best wishes,
    Tobias

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

  22. jimchicago
    Member
    Posted 1 year ago #

    Hi Tobias, I'm back because I'm trying to add borders to 2 tables on another site (different than the one with which you helped me earlier). Those tables are at:
    http://www.jimhinckley.com/cibco/transactions and
    http://www.jimhinckley.com/cibco/services

    The table on transactions has an ID of 1, so I assume that all its CSS should include .tablepress-id-1. The other table has an ID of 2, so all its CSS should include .tablepress-id-2. Correct?

    The strange thing is, each time I try to make one table's CSS consistent for its table ID, it seems to change the CSS for the other table. That is, when I go thru table #1's CSS, making sure that .tablepress-id ends with 1 (and then click Save), I switch over to the CSS for table #2 and find that all of its instances of .tablepress-id have changed to end with 1.

    Very weird (to me, at least) . . . any suggestions?

  23. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jim,

    I have a feeling that you are misinterpreting things here: There's not one "Custom CSS" textarea for each individual table, but only one common/global "Custom CSS" textarea that holds the CSS code for all tables at once.

    Your assumption about the table IDs in the CSS code is totally right. You'll now just have to put it into the "Custom CSS" textarea twice, i.e. once for each table.

    Do you know what I mean?

    Regards,
    Tobias

  24. jimchicago
    Member
    Posted 1 year ago #

    Ehhhhh . . . wow, you're right, I did misunderstand that (usually I slap my own forehead only ONCE a week!). No wonder I was seeing what I did after every table edit. Thank you!!!

  25. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Jim,

    no problem :-)

    Best wishes,
    Tobias

  26. danicom
    Member
    Posted 1 year ago #

    Hi Tobias,
    how are you?
    I'm a former user of wp-table reloaded
    Well my problem is also related with table size. See my problem here
    http://autismodiario.org/2011/12/13/medicacion-y-autismo-revision-sistematica/
    I try all the tips for control the size of table
    Using the CSS like
    Restric the length of each column (7 columns in total)
    .tablepress-id-16.column-1 {
    width: 80px;
    }

    .tablepress-id-16.column-2 {
    width: 80px;
    }
    .... up to column-7
    The sze of my template are 640 px
    Any trip to solve this?
    Thnks a lot for the support

  27. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post. Good to hear that you switch from WP-Table Reloaded to TablePress.

    From what I can see, the only chance to make this table fit is to reduce the font size.
    First of all, your "Custom CSS" is not working, because the space between the 16 and the .column-... is missing. But even after fixing that, the width will not really change. The reason for this is that the long words in your table require this minimum width. For example, check the words
    "antipsicóticos" in the first column,
    "(Valoración" in the second column,
    "comportamiento" in the third column,
    "microgramos" in the fourth column,
    "Demografía" in the fifth column,
    "extrapiramidales" in the sixth column, and
    "comportamientos" in the seventh column.
    These are very long, but the browser can not add a line break there (i.e. word-wrap them). Due to that, these words define the minimum width of the columns. And those then define the minimum width of the table. This simply is how tables work in browsers...
    And as the words are just so long, they require a minimum width that is bigger than 640px.

    Therefore, the only chance to change this, is to either remove content from the table, which you probably don't want to do, or to make the text size smaller. Additionally, you could make the padding between the cell border and the content smaller. So, please try this "Custom CSS" and remove the CSS code that you had for the widths:

    .tablepress-id-16 th,
    .tablepress-id-16 td {
      padding: 2px;
      font-size: 10px;
    }

    Regards,
    Tobias

  28. danicom
    Member
    Posted 1 year ago #

    Works fine, thank you!!

  29. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure, no problem!
    You are very welcome!

    Best wishes,
    Tobias

  30. jimchicago
    Member
    Posted 1 year ago #

    Hi Tobias, I figured out how to change both the background color and font color for a header row. But is it possible to change the background color of just ONE cell in a header row?

    Here is the page I'm working on. I'd like to change the background color of the L-hand cell in the header.

125

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.