![]() ProFundCom has developed a Zoom function that allows the tables to be zoomed in and out based on the device that they are being viewed on. Resize the browser window to see the effect:īare bones example: First Name Last Name Job Title James Matman Chief Sandwich Eater The Tick Crimefighter Sorta Responsive Table with a horizontal scrollĪ responsive table will display a horizontal scroll bar if the screen is too small to display the full content. But it is almost too simple an approach so most will try other more complex approached. This will probably save you the most time as mobile devices are incredibly good at resizing images. These are just a few potential solutions to the problem to data tables on small screens. In this article we look are some of the best practices we have found. Or you can zoom into the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Responsive design is all about adjusting designs to accommodate screens of different sizes. ![]() Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower. A single row of data needs to be kept together to make any sense in a table. Especially in fund marketing, data tables can be quite wide, and necessarily so. Since the emails are designed on desktops, sometimes the readability on mobile screens is an afterthought. In time the issues should be resolved (but who knows when).One of the hardest things to do when creating an email with data laid out in tables is how to make the contents readable on mobile and tablet screens. ![]() 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. Edit fiddle - JSFiddle - Code Playground By design, this content will vertically scroll. overflow-auto on an element with set width and height dimensions. These classes are not responsive by default. ![]() 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. Adjust the overflow property on the fly with four default values and classes. 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). 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).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |