![]() If you don’t want or need anything more than the scrollbar as a visual indicator of scrollability, you could get away with this. ![]() The CSS that creates the scrollbar is very simple. To be able to scroll the entire table you need to put it inside a container element with overflow scrolling enabled. If I wrap the iframe with a div styled like this, it always shows the problem: height:100 overflow:auto -webkit-overflow-scrolling: touch position:relative But if I remove one line, overflow:auto, the issues goes away. The -webkit-overflow-scrolling CSS property controls whether or not touch. There may also be large incompatibilities between implementations and the behavior may change in the future. Do not use it on production sites facing the Web: it will not work for every user. ![]() To see the end result, take a look at the Responsive scrollable tables demo page. This also affects touch and hold to select text or paste from the clipboard. Non-standard: This feature is non-standard and is not on a standards track. The concept is the same, but some details differ. In case the following seems familiar, it may be because Russ Weakley describes a pretty similar technique in A simple (and very rough) responsive table solution. But I do think that one of the simplest and least inelegant ways to handle data tables is to make them horizontally scrollable when necessary, and so I thought I’d describe how I do that. That’s expected really-I don’t think this is a problem that can be solved perfectly, so we have to compromise somehow. See Responsive Data Table Roundup at CSS-Tricks for some examples.Įvery technique for making tables flexible (or “responsive”) that I have seen comes with its own set of drawbacks. position: absolute important overflow: hidden important width: 1px. There are already several different strategies for dealing with data tables on small screens, involving things like flipping tables, hiding columns, rearranging data cells, and making over-wide tables scrollable. This tricks mobile safari into thinking the overlay is scrollable, thus intercepting the touch event from the body. Then add -webkit-overflow-scrolling:touch overflow-y: auto to the wrapper. Since I wrote that post, many, many small screen devices that you can use to browse the web have been released, which means that the risk of people encountering a data table that is too wide to fit their browser window is greater than ever. For touch devices, try adding a 1px wide, 101vh min-height transparent div in the wrapper of the overlay. While that may work in some cases, it often will not be very pleasant to use. The solutions I offered in that post involve using table-layout:fixed to lock down the width of tables. Over six years ago I wrote a short post about preventing HTML tables from becoming too wide.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |