There is a webpage with several tables. One of them has a single tr and >15 tds inside. While there are becoming more and more tds, they start to get out of screen.
I want to position them vertically, like if they were trs or divs. But:
So I would like to solve it with CSS, because in that way it is easy to set up my personal custom CSS, if my colleagues would say that my redesign sucks while going beyond screen borders was cool. Also CSS is easier to edit and see results in real time than edit desctructing JS.
As James Donnelly tells you in the comments, I think that's not the normal behaviour of tables. Also, I don't know if you are using a table for layout or for tabular data. So, I think was preferible to change the markup into something like this example.
As you can see, I did a replace: all <tr> into <div class="row"> and all <td> into <div>. I replaced all the trand td closing tags too into closing divs, and then I set all the inner <div> with float:left. This puts all "td's" inline, just like a table, but when they reach the border of the page starts stacking down.
There are another fixes that comes into my mind if you want to preserve the markup.
You could style the <td> as display:block. This puts all your <td> one under another, but this doesn't work on IE7 / IE8.
You could enclose all table in a div and set that div with overflow-x:scroll and to make sure max-width:100%, as this example.
Hope this helps, and don't be afraid to break things, sometimes is the best learning method! ;)