Title: Issues: Width + 2nd row header
Last modified: January 7, 2020

---

# Issues: Width + 2nd row header

 *  Resolved [blurp](https://wordpress.org/support/users/yancong88/)
 * (@yancong88)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/)
 * Hi Tobias,
 * Thanks for being so helpful.
 * There are many things I need help with unfortunately. I have scrolled through
   the forum but just can’t figure out.. have printscreen the excel spreadsheet 
   table I am trying to duplicate on my site for your convenience (and mine actually).
 * Here’s what I am trying to
 * **\*\*\*Header to be Row 2 instead of Row 1\*\*\***
    – Certain cells in Row 1
   to be merged to illustrate what the columns meant (see picture on the site) –
   Header (Row2) to wrap if needed – Sorting button to be on Row 2
 * **\*\*\*Width of columns\*\*\***
    – Hopefully I can fit every column with the
   below width allocation in 1 page (without horizontal scrolling) – Column 1 = 
   25% width – Column 2 to 16 = 5% width – If even 5% is not sufficient to cause
   any of Column 2 to 16 to wrap, I would like to use responsive scrolling instead
 * Alignment of text
    – Align Column 2 to 16 in the center – Align Column 1 to the
   right
 * Miscellaneous design
    – Move the filtering option to the right side above the
   search bar
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fissues-width-2nd-row-header%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12301350)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * “***Header to be Row 2 instead of Row 1***”:
    That’s not possible, unfortunately.
   Due to how the JavaScript library works, it will not be possible to have the 
   header row in row 2 and/or have the sorting buttons there. You could maybe play
   around with adding another table “above” the first one, so that it looks like
   the header row is the second row.
 * Now, for the remaining items, you should first fix the displayed layout, i.e.
   that gray box around the table: For that, please go the “Edit” screen of this
   page and inside the “Elementor” text widget where you added the Shortcode, remove
   any HTML `<pre>` and `</pre>` tags around the Shortcode.
 * After that, the table should actually already fit on the screen, of a desktop
   monitor.
 * To change the alignment, please add this to the “Custom CSS” textarea on the “
   Plugin Options” screen of TablePress:
 *     ```
       .tablepress-id-1 thead th,
       .tablepress-id-1 tbody td {
         text-align: center;
       }
       .tablepress-id-1 .column-1 {
         text-align: right;
       }
       ```
   
 * To move the filters to the right, please try adding this as well:
 *     ```
       .column-filter-widget {
         float: right;
       }
       ```
   
 * Regards
    Tobias
 *  Thread Starter [blurp](https://wordpress.org/support/users/yancong88/)
 * (@yancong88)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12301473)
 * thanks! seems to have solved it!!
    -  This reply was modified 6 years, 5 months ago by [blurp](https://wordpress.org/support/users/yancong88/).
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12301492)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * Best wishes,
    Tobias
 *  Thread Starter [blurp](https://wordpress.org/support/users/yancong88/)
 * (@yancong88)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12305231)
 * Hi sorry Tobias..
 * I have 2 more questions.
 * 1. On a mobile, the Column 1 is all wrapped up in a tiny column. How can i ensure
   that the column width is the same such that the contents are in a single line?
 * 2. My top header row seems to be unable to align center. How can I do that? Many
   thanks for your troubles again.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12305628)
 * Hi,
 * 1. For that please add
 *     ```
       white-space: nowrap;
       ```
   
 * to the CSS commands for column 1.
 * 2. This is caused by the way how you remove the display of the sorting arrow 
   icons. In addition, I recommend to add this “Custom CSS”:
 *     ```
       .tablepress-id-1 thead .sorting {
       	padding: 1px;
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [blurp](https://wordpress.org/support/users/yancong88/)
 * (@yancong88)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12306767)
 * Thanks Tobias!
 * How can i reduce the font size of the following
    1. “Show 20 entries” bar 2. 
   Search bar 3. Actual filter dropdown bar (rather than the list that comes beneath
   it after selecting)
 * **Wrapping on PC but not on mobile (as mobile has horizontal scroll)**
    Additionally,
   is there a way we can “lengthen” the table horizontally when mobile screen is
   used to view the table? Since we are already scrolling through the table horizontally,
   we should have infinite amount of space to use.
 * Currently, viewing on mobile unnecessarily wraps the cells and makes it potentially
   hard to read. But using a simple “white-space: nowrap” command makes the PC version
   hard to read/navigate.
 * Many many thanks!!
    -  This reply was modified 6 years, 5 months ago by [blurp](https://wordpress.org/support/users/yancong88/).
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12308007)
 * Hi,
 * to reduce those text sizes, you can use the CSS
 *     ```
       .dataTables_wrapper label,
       .dataTables_wrapper select,
       .dataTables_wrapper input {
       	font-size: 12px;
       }
       ```
   
 * To “lengthen” the table horizontally, you could set a minimum width, wrapped 
   in a CSS3 Media Query so that it only applies to phones:
 *     ```
       @media screen and (max-width:768px) {
         .tablepress-id-1 .column-2 {
           min-width: 200px;
         }
       }
       ```
   
 * The same approach could be used to limit the white-space parameter to only small
   screens:
 *     ```
       @media screen and (max-width:768px) {
         .tablepress-id-1 .column-1 {
           white-space: nowrap;
         }
       }
       ```
   
 * Regards,
    Tobias

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

The topic ‘Issues: Width + 2nd row header’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 7 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/issues-width-2nd-row-header/#post-12308007)
 * Status: resolved