Title: Fixed Column Widths
Last modified: November 28, 2020

---

# Fixed Column Widths

 *  Resolved [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * (@cuckoofairweb)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/)
 * Hi David,
 * Another topic on something which bugs me as I can’t figure out how to make the
   tables produced by MLA have fixed width columns common for different ‘calls’.
 * The above page has a whole set of tables invoked with a short code like:
    [mla_gallery
   mla_markup=downtonpc my_gallery_title=”Year Ending March 2023 Financial Reports”
   category_name=pub-doc tag=”finrep+2022″]
 * The style contains:
    <style type=’text/css’> #[+selector+] { margin: 0; width:
   auto; } #[+selector+] tbody { border: 0px solid #ff0000; padding-top: 0px; padding-
   right: 0px; padding-bottom: 0px; padding-left: 0px; } #[+selector+] table { border:
   0px solid #ff0000; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;
   padding-left: 0px; } #[+selector+] .gallery-row td .gallery-icon { width: 16;
   height: 16; vertical-align: top; } #[+selector+] .gallery-row .gallery-icon img{
   border: 0px solid #FF0000; } #[+selector+] .gallery-row { float: none; text-align:
   left; width: auto; padding: 0; } #[+selector+] td { padding: 0.4em; } #[+selector
   +] .header-row { float: none; text-align: left; width: auto; font-weight: bold;}#[
   +selector+] .gallery-caption { margin-left: 0; vertical-align: top; } </style
   >
 * and the Markup has:
    ARGUMENTS post_parent=all post_mime_type=application/pdf
   size=icon mla_image_attributes=’width=”16″ height=”16″ ‘ columns=1 link=none 
   orderby=”name DESC”
 * OPEN
    <h3>[+template:([+query:my_gallery_title+])+]</h3> <table id=”[+selector
   +]” class=”gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[
   +size_class+]”> <tr class=”header-row”><th>Document Title – click to view</th
   ><th>Icon shows File type</th></tr>
 * ROW OPEN
    <tr class=”gallery-row”>
 * ITEM
    <td> [[+title+]](https://wordpress.org/support/topic/fixed-column-widths/[+file_url+]?output_format=md)
   </td> <td class=”gallery-icon”> [+link+] </td>
 * Where could I set a column to have a consistent width?
 * Thanks
 * Paul
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffixed-column-widths%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [David Lingren](https://wordpress.org/support/users/dglingren/)
 * (@dglingren)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13723763)
 * Thanks for your question, for the link to your sample page and for the details
   of your custom style and markup templates; very helpful. I copied your templates
   to my system and made a few adjustments that show one way to achieve your goal.
   The full templates are included below, but here are the key styles that adjust
   the column width:
 *     ```
       <style type='text/css'>
       #[+selector+] {
       margin: 0;
       width: 100%;
       }
       #[+selector+] .gallery-row td .gallery-title {
       width: 80%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] .gallery-row td .gallery-icon {
       width: 20%;
       height: 16;
       vertical-align: top;
       }
       ```
   
 * As you can see, the first `#[+selector+]` style sets the overall width of the
   gallery to the full width of the enclosing area. A new style for the `td .gallery-
   title` class assigns 80% of the width to your title/link column, and the `td .
   gallery-icon` class gets the remaining 20%. You could substitute specific pixel
   widths if that suits your application better. The full custom style template 
   is:
 *     ```
       <style type='text/css'>
       #[+selector+] {
       margin: 0;
       width: 100%;
       }
       #[+selector+] tbody {
       border: 0px solid #ff0000;
       padding-top: 0px;
       padding-right: 0px;
       padding-bottom: 0px;
       padding-left: 0px;
       }
       #[+selector+] table {
       border: 0px solid #ff0000;
       padding-top: 0px;
       padding-right: 0px;
       padding-bottom: 0px;
       padding-left: 0px;
       }
       #[+selector+] .gallery-row td .gallery-title {
       width: 80%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] .gallery-row td .gallery-icon {
       width: 20%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] .gallery-row .gallery-icon img {
       border: 0px solid #FF0000;
       }
       #[+selector+] .gallery-row {
       float: none;
       text-align: left;
       width: auto;
       padding: 0;
       }
       #[+selector+] td {
       padding: 0.4em;
       }
       #[+selector+] .header-row {
       float: none;
       text-align: left;
       width: auto;
       font-weight: bold;
       }
       #[+selector+] .gallery-caption {
       margin-left: 0;
       vertical-align: top;
       }
       </style>
       ```
   
 * I made a few changes to your custom markup template as well. Here is the full
   template; I will highlight the differences following the content:
 * **Arguments**
 *     ```
       post_parent=all
       post_mime_type=application/pdf
       size=icon_only
       mla_image_attributes='width="16" height="16"'
       columns=1
       link=none
       orderby="name DESC"
       ```
   
 * **Open**
 *     ```
       <h3>[+template:([+query:my_gallery_title+])+]</h3>
       <table id="[+selector+]" class="gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]">
       <tr class="header-row"><th>Document Title – click to view</th><th>Icon shows<br />File type</th></tr>
       ```
   
 * **Row Open**
 *     ```
       <tr class="gallery-row">
       ```
   
 * **Item**
 *     ```
       <td class="gallery-title">
       <a href="[+filelink_url+]">[+title+]</a>
       </td>
       <td class="gallery-icon">
       [+link+]
       </td>
       ```
   
 * **Row Close**
 *     ```
       </tr>
       ```
   
 * **Close**
 *     ```
       </table>
       ```
   
 * In the **Arguments** section I changed `size=icon` to `size=icon_only`. This 
   displays the generic PDF icon even if the associated item has a thumbnail image.
   You could change it to something like `size=thumbnail` to show a larger image
   if your documents have a meaningful thumbnail.
 * In the **Open **section I changed `<th>Icon shows File type</th>` to `<th>Icon
   shows<br />File type</th>`, to make the column header more compact and leave 
   more space for the title links.
 * In the **Item **section I added a new `class="gallery-title"` attribute to allow
   styling of the title column. I changed the `[+title+]` element to `<a href="[
   +filelink_url+]">[+title+]</a>` so the title would become a hyperlink.
 * I added the **Row Close** and **Close** sections to close out the template.
 * I hope these changes get you started on an approach that works for your application.
   I am marking this topic resolved, but please update it if you have problems or
   further questions regarding the above suggestions. Thanks for your continued 
   interest in the plugin and your contributions in this support forum.
 *  Thread Starter [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * (@cuckoofairweb)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13736747)
 * Hi David,
 * Well I made some progress but not much – in the Previous Reports section of the
   web page [https://downtonparishcouncil.gov.uk/main-council/financial-reporting](https://downtonparishcouncil.gov.uk/main-council/financial-reporting)
   the < /br> changed worked ok but the tables have remained stuck!
 * Using Google Chrome and Inspect-ing the page appears to show that:
    table is 
   full width tbody is full width but also appears to have no MLA specific styles
   attached* tr class header row then has a reduced width * there is a style for
   tbody but it doesn’t appear to be used in the markup?
 * Here’s the style and mark up settings:
 * MARKUP
 * ARGUMENTS
    post_parent=all post_mime_type=application/pdf size=icon_only mla_image_attributes
   =’width=”16″ height=”16″ ‘ columns=1 link=none orderby=”name DESC”
 * OPEN
    <h3>[+template:([+query:my_gallery_title+])+]</h3> <table id=”[+selector
   +]” class=”gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[
   +size_class+]”> <tr class=”header-row”><th>Document Title – click to view</th
   ><th>Icon shows</br> File type</th></tr>
 * ROW OPEN
    <tr class=”gallery-row”>
 * ITEM
    <td class=”gallery-title”> [[+title+]](https://wordpress.org/support/topic/fixed-column-widths/[+filelink_url+]?output_format=md)
   </td> <td class=”gallery-icon”> [+link+] </td>
 * ROW CLOSE
    </tr>
 * CLOSE
    </table>
 * STYLE
    <style type=’text/css’> #[+selector+] { margin: 0; width: 100%; } #[+selector
   +] tbody { border: 0px solid #ff0000; padding-top: 0px; padding-right: 0px; padding-
   bottom: 0px; padding-left: 0px; } #[+selector+] table { border: 0px solid #ff0000;
   padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
   width: 100%; } #[+selector+] .gallery-row td .gallery-title { width: 80%; height:
   16; vertical-align: top; } #[+selector+] .gallery-row td .gallery-icon { width:
   20%; height: 16; vertical-align: top; } #[+selector+] .gallery-row .gallery-icon
   img { border: 0px solid #FF0000; } #[+selector+] .gallery-row { float: none; 
   text-align: left; width: auto; padding: 0; } #[+selector+] td { padding: 0.4em;}#[
   +selector+] .header-row { float: none; text-align: left; width: auto; font-weight:
   bold; } #[+selector+] .gallery-caption { margin-left: 0; vertical-align: top;}
   </style>
 *  Plugin Author [David Lingren](https://wordpress.org/support/users/dglingren/)
 * (@dglingren)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13743495)
 * Thanks for trying out my suggestions and for your thorough post of the results.
   I regret that my CSS skills are limited and I gave you some incorrect information.
   Try updating the title and icon styles to these:
 *     ```
       #[+selector+] tr.gallery-row td.gallery-title {
       width: 80%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] tr.gallery-row td.gallery-icon {
       width: 20%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] tr.gallery-row td.gallery-icon img {
       border: 0px solid #FF0000;
       }
       ```
   
 * Or, even simpler, these:
 *     ```
       #[+selector+] .gallery-title {
       width: 80%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] .gallery-icon {
       width: 20%;
       height: 16;
       vertical-align: top;
       }
       #[+selector+] td.gallery-icon img {
       border: 0px solid #FF0000;
       }
       ```
   
 * I hope this will give you a better result. Again, I regret the inconvenience 
   caused by my earlier errors. Thanks for your understanding.
 *  Thread Starter [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * (@cuckoofairweb)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13746339)
 * Hi David, after a lot of prototyping and debugging (my CSS is very very poor!)
   it seems that (on my system at least) that adding gallery-columns-[+columns+]
   to the <table> in the OPEN part of markup so it reads like this
    table id=”[+
   selector+]” class=”gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-
   size-[+size_class+]” somehow stops the TR from being the 100% width.
 * If it is removed so the it reads like:
    table id=”[+selector+]” class=”gallery
   galleryid-[+id+] gallery-size-[+size_class+] ” then the TR becomes 100% width.
 * I have updated the page
 * [https://downtonparishcouncil.gov.uk/main-council/financial-reporting](https://downtonparishcouncil.gov.uk/main-council/financial-reporting)
 * to show a raw bones basic table, followed by a table with gallery-columns-[+columns
   +] in the TABLE CLASS= and finally the remaining tables that have had the gallery-
   columns-[+columns+] removed from the OPEN MARKUP.
 * Paul
 *  Thread Starter [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * (@cuckoofairweb)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13746363)
 * Hi just did another quick inspect in Google Chrome. It seems that adding gallery-
   columns-[+columns+] to the table class= inserts this style:
 * .gallery-columns-1 {
    display: flex; flex-wrap: wrap; } and its the display: 
   flex; that stops the TR becoming full width.
 * The CSS style appear to be set by the theme
    [https://downtonparishcouncil.gov.uk/wp-content/themes/responsive/core/css/style.min.css?ver=4.4.5](https://downtonparishcouncil.gov.uk/wp-content/themes/responsive/core/css/style.min.css?ver=4.4.5)
 *  Plugin Author [David Lingren](https://wordpress.org/support/users/dglingren/)
 * (@dglingren)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13749875)
 * Thanks for your detective work and your updates. My CSS is no stronger than yours.
 * You can try adding a style to your `mla_styles` template to override the theme’s
   styling or remove the class from your `mla_markup` template. You can also try
   the changes I gave in my earlier post.
 * I noticed that your styles set the width for the `th.gallery-title` and `th.gallery-
   icon` tags, but not the corresponding `td.gallery`… tags; you can try adding 
   those. I also see you have widths of “85%” and “20%” which add up to 105%.
 * Is there anything else you need from me at this point?
 *  Thread Starter [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * (@cuckoofairweb)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13770686)
 * Hi David,
 * Just to let you know that in end I just removed the gallery-columns-[+columns
   +] from the OPEN MARKUP.
 * It’s style was set via the sites theme and it wasn’t clear how to update it.
 * I also discovered that my site level CSS updates (mainly done so that tablepress
   tables would display with green borders was interfering with MLA styling so I
   cleared that out too!
 * I did as you suggested and created a dedicated style sheet and also created a
   3 column display.
 * The final web page looks like [https://downtonparishcouncil.gov.uk/main-council/financial-reporting](https://downtonparishcouncil.gov.uk/main-council/financial-reporting)
 * Many thanks
 * Paul

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

The topic ‘Fixed Column Widths’ is closed to new replies.

 * ![](https://ps.w.org/media-library-assistant/assets/icon-256x256.png?rev=973502)
 * [Media Library Assistant](https://wordpress.org/plugins/media-library-assistant/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/media-library-assistant/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/media-library-assistant/)
 * [Active Topics](https://wordpress.org/support/plugin/media-library-assistant/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/media-library-assistant/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/media-library-assistant/reviews/)

## Tags

 * [column widths](https://wordpress.org/support/topic-tag/column-widths/)

 * 7 replies
 * 2 participants
 * Last reply from: [cuckoofairweb](https://wordpress.org/support/users/cuckoofairweb/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/fixed-column-widths/#post-13770686)
 * Status: resolved