Tables Advanced

Before moving forward please ensure that the JavaScript Library features are disabled in the editing view of the table

In preparation for the next steps, please adjust the table short-code found on the page where the table appears.

Example:

• Before – [ table id=# /]
• After – [ table id=# responsive=scroll /]

If you have long headers it is encourage to put “breaks” where it is most ideal for a new line to start. <br> tags will force the following text onto its own line, this is helpful to preemptively format headers.

Example:

• Before – Administrative Office Members
• After – Administrative<br>Office<br>Members
• Visual – 

Note* – The word “Administrative” is too long, but the words “Office” and “Members” is still legibly when we use break tags appropriately. To fix this issue please see the CSS Adjustments tab.

Navigate to the “Plugin Options” item under the TablePress Dashboard.

You should see a screen with an empty panel

We will then want to add the following snippet of code:

.tablepress-id-N {
width: 1500px !important;
}


You will want to replace the “N” with the Table ID of your table that needs visual adjustments. This will expand your table to 1500 pixels horizontally adding enough space for most tables. The 1500px is split up evenly among all columns within a table.

For example, if you have 5 columns in your table with a width of 1500px each column will have 300px.

*Note – If 1500px is too much or too little of space for your table feel free to adjust the number by increments of 50px.

Adjusting a Single Column

When there is a specific column that has much less information than the rest of the columns you can adjust the less dense column to accommodate more of the table.

Before:

After:

We were able to fit more content on the same amount of space by adjusting how much space specific columns take up.

Before adjusting the size of specific column, adjust the size of the entire table (see top of this tab) to ensure the rest of the columns have enough space.

To adjust the size of a specific column use the snippet below (placed underneath the snippet for the table width found above):

.tablepress-id-N .column-Z {
width: 150px !important;
}

Replace “N” with the Table ID and replace “Z” with the column number you wish to adjust.

The width of a column is being adjusted in this instance. If the width of the entire 5 column table was set to 1500px and the width of column 1 was set to 150px that means that column 1 occupies 150px while the rest of the columns collectively and evenly occupy the remaining 1350px.

If you wish to adjust specific columns in a table you can use the code above once per column. If the individual column sizes sum to more than the designated table size the individual column sizes will be ignored.

Due to all the possible variations and details that go into adjusting a table, please reach out to us for assistance.
When sending submitting a request, please attach screenshots of the CSS Panel and the front end so we may properly troubleshoot.