Stretch Table To Full Width Of Page

Skip to content

WordPress.org

Forums

• Welcome to Support
• Guidelines
• Get involved
• Log in

• Welcome to Support
• Guidelines
• Get involved
• Log in

Skip to content

Home / Plugin: TablePress - Tables in WordPress made easy / Stretch table to full width of page

Search for: Search forums

• Resolved kubuskwal

  (@kubuskwal)

  4 years, 8 months ago

  Hi Tobias!

  First of all, thank you for the amazing plugin! It’s insane that you’re offering a plugin this advanced with amazing support all for free. It isn’t much, but I just made a small donation as thanks.

  I’ve been tinkering with TablePress + DataTables Button extension and got almost everything working the way I want by scooping up bits of code from old support topics, but I’m stumped this time.

  The table on the page I linked in the support form doesn’t stretch to 720 px to fill out the entire page on desktop. I would like it do that, just like it does here:

  https://www.howtogames.nl/guides/animal-crossing-new-horizons-acnh/encyclopedie/alle-insecten-lijst/

  I’m not sure what I did right to get it to stretch on that page, or what I’m doing wrong on the new page. I’m using the following css in the Plugin Options (it’s probably very messy because I recycled a lot of code I found and I’m no css expert):

  .tablepress-id-1 tbody td, .tablepress-id-2 tbody td { font-size: 10px; vertical-align: middle; } .tablepress thead th, .tablepress tfoot th { background-color: #3b8e50; font-weight: bold; font-size: 10px; color: #ffffff; } .tablepress thead .sorting_asc, .tablepress thead .sorting_desc, .tablepress thead .sorting:hover { background-color: #e89a00; color: #ffffff; } .tablepress .column-1, .tablepress .column-2, .tablepress .column-4, .tablepress .column-5, .tablepress .column-6, .tablepress .column-7, .tablepress .column-8, .tablepress .column-9, .tablepress .column-10, .tablepress .column-11, .tablepress .column-12, .tablepress .column-13, .tablepress .column-14, .tablepress .column-15, .tablepress .column-16, .tablepress .column-17, .tablepress .column-18, .tablepress .column-19 { text-align: center; } .tablepress-id-1 .column-2, .tablepress-id-2 .column-2 { font-weight: bold; } a.dt-button, button.dt-button, div.dt-button { background-image: none; background-color: #3b8e50; color: #ffffff; } a.dt-button:hover, button.dt-button:hover, div.dt-button:hover { background-image: none !important; background-color: #e89a00 !important; color: #ffffff; } div.dt-button-collection button.dt-button.active:not(.disabled) { background-image: none !important; background-color: #e89a00 !important; color: #ffffff; } @media screen and (min-width: 800px) { .dataTables_wrapper, .dataTables { width: 720px !important; margin: 0 auto 1em; } } .tablepress-id-1 .column-1, .tablepress-id-2 .column-1 img { max-width: 50px; height: auto; } .dt-buttons { float: left !important; width: 30%; } .dataTables_filter { float: right; width: 30%; padding-right: 10px; }

  Do you have any idea how I could fix the table width? I realize that once you add/hide columns with the buttons the table will resize automatically and that’s okay of course.

  Also, I think I once asked if there was any way to make the button and the search box display on 1 line, and the answer back then was that it wasn’t possible. Would you happen to have any new ideas perhaps? I got it almost working with a float:left and float:right but it’s not perfect.

  Thank you in advance for any insight/help!

  The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

• Plugin Author TobiasBg

  (@tobiasbg)

  4 years, 8 months ago

  Hi,

  thanks for your post, and sorry for the trouble.

  No worries, you are not really doing anything wrong here. We might just need one change. Can you please replace

  .dataTables_wrapper, .dataTables { width: 720px !important; margin: 0 auto 1em; }

  with

  .dataTables_wrapper, .tablepress { width: 100% !important; margin: 0 auto 1em; }

  That should fix that width problem.

  As for the positioning of the button, you could try extending

  .dt-buttons { float: left !important; width: 30%; }

  with

  padding-top: 20px;

  Regards, Tobias

  Thread Starter kubuskwal

  (@kubuskwal)

  4 years, 8 months ago

  That worked perfectly! Thank you so much!

  The positioning of the button seems to get lost in mobile view but I’ll see if I can tinker around with some extra media queries :).

  Thanks again!

  Plugin Author TobiasBg

  (@tobiasbg)

  4 years, 8 months ago

  Hi,

  good to hear that this helped!

  The different positioning on mobiles might be caused by this CSS in the buttons’ CSS file:

  @media screen and (max-width: 640px) { div.dt-buttons { float: none !important; text-align: center; } }

  You could try overriding that in your “Custom CSS” with

  @media screen and (max-width: 640px) { .dataTables_wrapper div.dt-buttons { float: left !important; text-align: left; } }

  Regards, Tobias

  Thread Starter kubuskwal

  (@kubuskwal)

  4 years, 8 months ago

  Woah I never would’ve come up with that solution! As expected it works flawlessy :D.

  Thank you again for the extra help! 🙂

  Plugin Author TobiasBg

  (@tobiasbg)

  4 years, 8 months ago

  Hi,

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

  Best wishes, Tobias

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

Viewing 5 replies - 1 through 5 (of 5 total)

• The topic ‘Stretch table to full width of page’ is closed to new replies.

• 
• TablePress - Tables in WordPress made easy
• Frequently Asked Questions
• Support Threads
• Active Topics
• Unresolved Topics
• Reviews

• In: Plugins
• 5 replies
• 2 participants
• Last reply from: TobiasBg
• Last activity: 4 years, 8 months ago
• Status: resolved