WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Align table on the side with text all around it? (17 posts)

  1. Deon B
    Member
    Posted 7 months ago #

    Hi Tobias,
    is it possible by any chance to have a table aligned on the side (either left or right) and the wording around it?

    At the moment when I insert a table it takes the full width and I can't see any options to write on the side of the table...

    Thank you Tobias,
    and thanks again for this plugin and for your support.

    D

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    Yes, this is possible with some "Custom CSS" code.
    Assuming that you have the "Use DataTables" checkbox turned off on the "Edit" screen, this should help:

    .tablepress-id-123 {
      width: 50%;
      float: right;
    }

    Just change the table ID and desired width as desired and paste that into the "Custom CSS" textarea on the "Plugin Options" screen of TablePress.

    Regards,
    Tobias

  3. Deon B
    Member
    Posted 7 months ago #

    Hey Tobias,
    thank you for your quick reply!

    Honestly I am not sure what you mean by "Use DataTables" turned off... where can I find that option?

    Also,
    I would actually need the aligned-table for hundreds of posts, is it possible to maybe create a class of tables so that I don't need to add one table ID at a time in the custom CSS code?

    Thank you!
    Best,
    D

  4. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    "Use DataTables" is a checkbox below the table input fields on the table's "Edit" screen.

    If you want this for hundreds of posts/tables, the best approach should be an "Extra CSS class". For example, paste "tablepress-right-align" (or whatever name you want) into the "Extra CSS classes" field on the "Edit" screen of TablePress, for each table that you want to align like this.
    Then, you can use shorter CSS code like

    .tablepress-right-align {
      width: 50%;
      float: right;
    }

    Regards,
    Tobias

  5. Deon B
    Member
    Posted 7 months ago #

    Hi Tobias,
    thanks for your patience!

    So basically I need to add this code into the Custom CSS area of your plugin, right?

    .tablepress-right-align {
      width: 50%;
      float: right;
    }

    And then?
    When I create a table how do I assign it this style? I mean how do I select that this table will be aligned and not centered?

    Thanks for your help!
    Deon

  6. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    yes, just paste that code into the "Custom CSS" textarea. Then, for each table that you want to assing this style to, add "tablepress-right-align" into the "Extra CSS classes" field on the table's "Edit" screen.

    Regards,
    Tobias

  7. Deon B
    Member
    Posted 7 months ago #

    Geeez, you are the best!
    Thank you it does work.

    The only thing I have noticed is that if I insert an image in the table, no matter what width I specified in the Custom CSS field (50%) it takes more space (according to the width of the image). I thought it was going to re-size the image instead apparently it just takes more space (the table becomes wider than 50%)...

    Is anything I can do about this?

    Thanks a lot man!
    D

  8. Deon B
    Member
    Posted 7 months ago #

    Also Tobias,
    what if I want to style this class a little more?
    I would like edit colors and font-weight of the header's cells and background of the 9th row, but just for this specific align-right class.

    Could you give me some directions to style that class?

    Thanks a lot man!
    D

  9. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    no, there's a misconception here. The size of the content in a table (like the image) always takes precendence. If that has a larger width set than the table width, then the table will increase and not the image will shrink. You will therefore need to reduce the width of the image.

    To apply further styling to the "tablepress-right-align" tables, just use further CSS like

    .tablepress-right-align thead th {
      background-color: #ff0000;
    }
    .tablepress-right-align .row-9 td {
      color: #ff0000;
    }

    Regards,
    Tobias

  10. Deon B
    Member
    Posted 7 months ago #

    Thank you very much!
    The only thing I noticed is that when I highlight a cell giving it a different color background, or a different border, it works in Firefox but not in Chrome.

    Is there anything I can do about that?

    Thank you Tobias!
    Best,
    D.

  11. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    that's strange. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

  12. Deon B
    Member
    Posted 7 months ago #

    Hi,
    sure:
    http://ow.ly/tkUuC
    The table is just underneath the video.

    On Firefox I can see the green shadow on the 10th row and the grey shadow all around the table.

    In Chrome on PC I don't see any green shadow on the 10th row and see the grey shadow starting from the second row.

    On Safari on the iphone I see what I see in Chrome.

    Thanks for your help!
    D.

  13. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    thanks for the link! Yeah, I can confirm this.

    The reason most likely is how the box-shadow property works. Apparantly (see http://stackoverflow.com/questions/10874985/box-shadow-on-table-row-not-appearing-in-chrome and http://stackoverflow.com/questions/5605308/box-shadow-inside-tr-tag ), it only works on elements which have display: block, which however is not the case for tables (<table>) and table rows (<tr>).
    I guess Chrome is following the spec here, while Firefox is more tolerant.

    My suggestion would be to apply the box-shadow directly to the cells (but then of of course only to the left or right side).

    Regards,
    Tobias

  14. Deon B
    Member
    Posted 7 months ago #

    Thanks Tobias,
    so basically if I apply the shadow to 1 specific cell it will work? And there is no way to make it work for two cells next to each other (without the divider in the middle of course)?

    Thank you again!!!
    D

  15. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    yes, that's how I understand this. Applying box shadows to full rows in tables is not possible in Chrome (without some weird workarounds that could break the table layout). (So this is a general problem of tables, not just in TablePress.)
    You'll need to apply the box shadow to the cells. I have really played with this, so I don't know if it's possible to have the box shadow just on some sides of the cell (which is possible with borders, for example).

    Regards,
    Tobias

  16. Deon B
    Member
    Posted 7 months ago #

    Ok thank you very much Tobias!
    All the best!

  17. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    no problem, you are very welcome! :-)

    Best wishes,
    Tobias

Reply

You must log in to post.

About this Plugin

About this Topic