6/10/2023 0 Comments Primeng responsive columns![]() ![]() ![]() Columns can be applied to a single element or applied to multiple elements by targeting their parent. You can declare columns on any block level element. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully. If you’re already working with a fluid layout, the columns will reflow automatically. A supported browser will make calculations to wrap and balance content into tidy columns. The first cell flexes as the available space changes and the table overflows for horizontal scrolling just as we hoped it would.With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. Voilà! We have a faux min-width set on a table cell. But the width of the first column ( 200px) is respected and remains in place. If we apply a width to the first (it’s 200px in the snippet above), then the second column will be eaten up when the fixed table layout divides up the available space to distribute to the columns. The trick is that relationship between the first and the empty second. The same idea still applies: we’re applying widths to each column. Note that I have added classes in place of the inline styles from the previous example. We can add an empty as the second column for our in the HTML and apply a colspan attribute on the first column so that the first column takes up the space for both columns: The solution is to fake a min-width and we need to be a bit creative to do it. But unfortunately, min-width on table columns are not respected by the element. That way, the column would say, “I can give all of you some of my width until we reach this minimum value.“ Then the table would simply overflow its container and give the user a horizontal scroll to display the rest of the table. This could easily be solved if only we could set a min-width on the column instead of a width. A fixed table-layout value respects the width - but so much so that it eats up the space of the column that needs the most space… which is a no-go for us. We need the column with a bunch of content in it to flex a little while maintaining a fixed width for the rest of the columns. As you will notice, the browser does its best with the algorithm it has to divide the full available width between each column. In other words, we will let the browser decide how much width to give each column by applying table-layout: auto on it in CSS. Let us start with a table without defining any widths on its columns. We have the table-layout property in CSS to define how a table should distribute the width for each table column. The problemįirst we need to understand how layout is handled by the browser. That’s what I want to show you in this post. Other times, we get equal widths, but at the expense of a column that contains more content and needs more space.īut I found a CSS tricks-y workaround that helps make things a little easier. In some cases, one column is super wide while others are scrunched up. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. The good ol’ tag is the most semantic HTML for showing tabular data.
0 Comments
Leave a Reply. |