Over six years ago I wrote a short post about preventing HTML tables from becoming too wide. The solutions I offered in that post involve using table-layout:fixed to lock down the width of tables. While that may work in some cases, it often will not be very pleasant to use.
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. 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. See Responsive Data Table Roundup at CSS-Tricks for some examples.
Every technique for making tables flexible (or "responsive") that I have seen comes with its own set of drawbacks. That's expected really – I don't think this is a problem that can be solved perfectly, so we have to compromise somehow. 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.
Posted in CSS, JavaScript.
Copyright © Roger Johansson
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
No comments:
Post a Comment