-
AuthorPosts
-
August 9, 2019 at 5:51 pm #1126310
I have some problems formating the price Table as the description column is larger than the row.
Is there a way that the colums get the same height than the first description in the row?August 11, 2019 at 5:51 am #1126590Hey jillinnemann,
Sorry for the late reply, and thanks for the link and screenshot. Unfortunately there is not a good way to do this that will work for all screen sizes because these are really 4 different tables next to each other, not 1 table, so the height of each cell in each column has to be set. Yet these would have to be re-calculated for each screen size because a percentage won’t work.
If it was one table then the content of the first column cells would set the whole row, think of a spreadsheet.
But if you would like to give it a try I can explain what css to use, we will look at the first cell that is larger “Angebote, Aufträge, Lieferscheine, Rechnungen”, so to make all of the cells in that row the same use this css:#top.page-id-1346 div.avia-table.main_color.avia-pricing-table-container ul > li:nth-child(8) { height: 72px !important; }
then all you need to do is chage the nth-child number for each cell after that one working down, skipping the cells that are not larger, and also change the height for each one to match your text.
now you will want the icons to be centered, so use this css:#top.page-id-1346 div.avia-table.main_color.avia-pricing-table-container ul > li:nth-child(8) img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
and just match the nth-child numbers you came up with.
Please see the screenshot in Private Content area.
If you test the css above, be sure to clear your browser cache.I would recommend re-wording your text and maybe making the font smaller to fit the cells, or use an on-hover popup to show your full text.
I hope this helps.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.