My company's website/software uses many webdatagrids/ultrawebgrids, most of which display numerous rows of (sometimes, long strings of) data. This works well enough in "normal" web situations, but on mobile devices, the browser window narrows considerably, presenting me with serious styling problems.

In addition, I'm trying to avoid having to create a "mobile" copy of every page with a grid, to approve its appearance in mobile devices. Ideally, I'd like to find some settings that I can change in the theme and/or .skin file to make this work. Some dynamic coding, if available, would be acceptable as well, though I'd have to hand it over to development for implementation (I'm not a coder).

Simply restricting the grids' width doesn't work particularly well—either gives a horizontal scroll (which doesn't work predictably in all browsers), cuts off the end (when scroll bars don't show), or squeezes the columns down to the point of unusability. I've had a couple of thoughts to this end: presenting the columns of data in a "vertical" rather than "horizontal" format, either by displaying the columns in a single "block" of information, or by flipping the grid on its side, with the header to the left, and data-columns to the right. At this point, though, I'd consider any suggestions anyone has.

CSS3 has the ability to treat a table-cell as a block element, giving me what I want (mostly), but unfortunately, IE does not support that functionality (and I don't have the luxury of simply ignoring IE).