{"id":5077,"date":"2018-12-19T18:32:42","date_gmt":"2018-12-19T18:32:42","guid":{"rendered":"https:\/\/in.nau.edu\/web\/?page_id=5077"},"modified":"2020-03-13T13:12:05","modified_gmt":"2020-03-13T20:12:05","slug":"tables-advanced","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/web\/tables-advanced\/","title":{"rendered":"Tables Advanced"},"content":{"rendered":"

Tables Advanced<\/h1>\n\n
\n
\n
\n \n
\n
\n Overview Tab Open<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Initial Adjustments Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n CSS Adjustments Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Troubleshooting Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n \n
\n \n
\n
Overview Accordion Open<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
This guide will walk you through additional steps to help clean up an existing table. This solution aims to allows tables to expand as far as they need to horizontally to give all text enough space to appear properly. A horizontal scrollbar is added to allow users to move the table left and right to view all content.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
Initial Adjustments Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Before moving forward please ensure that the JavaScript Library features are disabled in the editing view of the table<\/p>\n
$\"\"$ <\/p>\n
In preparation for the next steps, please adjust the table short-code found on the page where the table appears.<\/p>\n
Example:<\/p>\n
\n
Before – [ table id=# \/]<\/li>\n
After – [ table id=# responsive=scroll \/]<\/li>\n<\/ul>\n
If you have long headers it is encourage to put “breaks” where it is most ideal for a new line to start. <br><\/strong> tags will force the following text onto its own line, this is helpful to preemptively format headers.<\/p>\n
Example:<\/p>\n
\n
Before – Administrative Office Members<\/strong><\/li>\n
After – Administrative<br>Office<br>Members<\/strong><\/li>\n
Visual – $\"\"$ <\/li>\n<\/ul>\n
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.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
CSS Adjustments Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Navigate to the “Plugin Options” item under the TablePress Dashboard.<\/p>\n
$\"\"$ <\/p>\n
You should see a screen with an empty panel<\/p>\n
$\"\"$ <\/p>\n
We will then want to add the following snippet of code:<\/p>\n
`.tablepress-id-N { \nwidth: 1500px !important; \n} \n<\/code><\/p>\n`
`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.<\/p>\n`
`For example, if you have 5 columns in your table with a width of 1500px each column will have 300px.<\/p>\n`
`*Note – If 1500px is too much or too little of space for your table feel free to adjust the number by increments of 50px.<\/p>\n`
Adjusting a Single Column<\/h5>\nWhen 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.<\/p>\n Before:<\/p>\n <\/p>\n After:<\/p>\n <\/p>\n We were able to fit more content on the same amount of space by adjusting how much space specific columns take up.<\/p>\n 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.<\/p>\n To adjust the size of a specific column use the snippet below (placed underneath the snippet for the table width found above):<\/p>\n .tablepress-id-N .column-Z { \nwidth: 150px !important; \n}<\/code><\/p>\n Replace “N” with the Table ID and replace “Z” with the column number you wish to adjust.<\/p>\n 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.<\/p>\n 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.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n\n \n \n Troubleshooting Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n \n \n\n\nDue to all the possible variations and details that go into adjusting a table, please reach out to us<\/a> for assistance. \nWhen sending submitting a request, please attach screenshots of the CSS Panel and the front end so we may properly troubleshoot.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n <\/div>\n\n <\/p>\n\n \n \n\n\n \n Academic unit site support<\/h3>\n <\/div>\n \n \n<\/i> Digital Marketing Support<\/a><\/p>\n<\/i> 928-523-1741<\/a><\/p>\n<\/div>\n <\/div>\n <\/div>\n\n\n \n \n Business unit site support<\/h3>\n <\/div>\n \n \n<\/i> ServiceNow<\/a><\/p>\n<\/i> 928-523-1511<\/a><\/p>\n<\/div>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":" Tables Advanced <\/p>\n","protected":false},"author":28,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","ring_central_script_selection":"","footnotes":""},"class_list":["post-5077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/5077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/comments?post=5077"}],"version-history":[{"count":1,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/5077\/revisions"}],"predecessor-version":[{"id":7375,"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/pages\/5077\/revisions\/7375"}],"wp:attachment":[{"href":"https:\/\/in.nau.edu\/web\/wp-json\/wp\/v2\/media?parent=5077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}