• Resolved Dartmoor Dave

    (@dartmoor-dave)


    I’ve been playing around with this superb plug in today but I can’t get everything working as I need it.

    I think I have read all the relevant topics but I still can’t get to change the column widths or the padding. The Custom CSS I’ve put in the Plug In Options works great in the preview, but not in my page. I can change the font, size and color but not the column widths or padding.

    I’ve probably missed something trivial as I know very little CSS and would appreciate a push in the right direction.

    This is my table: Coming Soon

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for this problem is that your theme is also adding CSS code to change the padding, and that it does so with a higher precedence. As this CSS is not loaded in the preview, you don’t see it there.
    To fix this, you’ll have to prepend all CSS selectors that change padding with #content, so that you should end up with

    #content .dataTables_wrapper .sorting,
    #content .dataTables_wrapper .sorting_asc,
    #content .dataTables_wrapper .sorting_desc {
      padding-right:padding-right: 20px;
    }
    #content .tablepress-id-1 th,
    #content .tablepress-id-1 td {
      padding: 2px;
    }

    Regards,
    Tobias

    Thread Starter Dartmoor Dave

    (@dartmoor-dave)

    Many thanks Tobias for you unbelievably quick reply – I’ve never seen support like it 🙂

    I’ve one related question: How do I set a maximum table width as I don’t want the table overflowing on to the side column when I have some wider data?

    And one unrelated question (which I will post in a separate topic if you wish): As you can see I have one field containing European dates. How do I specify this so that the sorts work ok.

    Many, many thanks for your help so far 🙂
    Dave

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Dave,

    sure, always glad when I can help!

    Unfortunately, preventing the table from overflowing is only possible through one way: Don’t fill it with data that makes it overflow. There’s no reliable way to achieve this in CSS, i.e. the columns can not be restricted to a certain desired column widths if the content in them requires a larger width (e.g. because there’s a very long word in a cell that the browser can not word-wrap).
    (There’s some work around which involves changing several CSS properies on the table, but that can then result in cut-off tables and is not really working properly in all browsers.)
    So, if a table overflows, you have to choose:
    – Either remove content or columns.
    – Reduce the font size or padding (inner white space in the cells).
    – Wrap the table in an extra HTML element and then add CSS to make the table scrollable to the side.

    About the sorting of European dates: For that, please take a look at the TablePress Extension at http://tablepress.org/extensions/datatables-sorting-plugins/

    Regards,
    Tobias

    Thread Starter Dartmoor Dave

    (@dartmoor-dave)

    Hi Tobias,

    Many thanks once again for a speedy and helpful reply.

    I’ve downloaded the sorting extension which has taken care of sorting my European dates – wonderful.

    So far I am very impressed with this plugin and your professionalism and attention to detail which is almost always missing in WordPress plugins.

    I am sure that I may have some more questions at a future date, but for the moment many thanks and I will be writing a great review tomorrow.

    Dave.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    And thanks for wanting to leave a review, I really appreciate it!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can't get column widths or padding to work’ is closed to new replies.