![]() In time the issues should be resolved (but who knows when). However it is unlikely to work in Safari or ios (and if it does it may have accessibility issues). It uses display grid and display:contents to get the effect you want. Therefore the only workable solution I can see without changing the html is as follows. Its a similar problem where you put an image in the float but if you give the image width:100% then some browser will assume that is 100% of its parent width which for a float is dictated by its content so you get no width at all.įlex has a similar problem but grid seems to have overcome that issue. The specs don’t help as they say that if the width of an element is dependent on the width of its children whose width in turn is dependent on the parent then the layout is undefined. Tables generally treat widths and heights in special ways anyway and will allow elements to force the issue unless the table-layout:fixed algorithm is used. ![]() The problem is that for there to be overflow there generally needs to be a width otherwise there is effectively nothing to overflow. I have run into this problem many times in the last 20 years and its always been a problem to get text-overflow on a table-cell. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Does anyone know how make 3 happen The solution only need work in Chrome, but it it also worked in other browsers that would be even better. The break-word doesn't seem to be filtering down. Edit fiddle - JSFiddle - Code Playground That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. To me this seems like a simple concept and all the CSS attributes needed are there, but I’ve spent days trying to make it work. There must be a way to combine max-widths with min-widths, 0% with 100% values or use fit-content and similar properties, but I haven’t found the right combination. I have found similar questions about truncating tables columns, but they all seem to use absolute widths for the tables. I’m open to using different display attributes on the table/cells to achieve this, but I don’t want to replace the table with divs, wrap the cell contents or use a fixed-width container div (as used in the illustration below). Include browser support, which basically amounts to ubiquitous.I have tables with various widths and want to truncate the columns and its content with text-overflow:ellipsis to fit the screen (down to the width of the column header, then horizontal scroll), but without setting a fixed or 100% table/column width (not stretching wider than its content). In EmailsĬampaign Montior’s support chart for CSS in email clients shows table-layout as being supported across the board. I’ve heard that this style of table layout is faster as well, which stands to reason because the contents of the entire table don’t need to be analyzed to know how big column widths are going to be. See the Pen xFcrp by Chris Coyier ( on CodePen.įor good measure, know that you can use the element to set column widths too, because those effect the first row of cells and it’s all about that first row of cells setting the basis for the rest of the table. * Column widths are based on these cells */ I imagine most of you know this: tables are for tabular data and emails. not wrap Pen titles) but also not blow out the width of the table. I explored this because I was trying to keep a uniform row height for Pens in list view on CodePen (i.e. See the Pen Fixed Tables Solve Some Issues by Chris Coyier ( on CodePen. The other method is simply setting the overflow of the body element to hidden. ![]() So whenever the modal is opened, it takes the user back to the scroll top. While this can work, it returns the scroll position of the user to the top. ![]() It’s a little more complicated, but not much. One method is to set the position to fixed. Set the width of those, and the rest of the table follows. The layout is fixed based on the first row. Things get a lot sturdier and more predictable with property/value in place. That style, to me, feels spongy and weird. The default property for table-layout is auto, and that is the table layout I think most of us are familiar with. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |