Issues: Width + 2nd row header

  • Resolved blurp

    (@yancong88)


    6 years, 5 months ago

    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 to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 5 months ago

    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

    (@yancong88)

    6 years, 5 months ago

    thanks! seems to have solved it!!

    • This reply was modified 6 years, 5 months ago by blurp.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 5 months ago

    Hi,

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

    Best wishes,
    Tobias

    Thread Starter blurp

    (@yancong88)

    6 years, 5 months ago

    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

    (@tobiasbg)

    6 years, 5 months ago

    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

    (@yancong88)

    6 years, 5 months ago

    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.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 5 months ago

    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.