Can Css Place Tags One Under Another Like Do

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 po

Solution 1:

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! ;)

Solution 2:

You could use jQuery to loop through each tr and td and increasing the height of the containing tr, relative positioning each based on the size of the first. It would only work in certain situations where there were no colspans/rowspans and padding may cause issues.

var table = $('table');
var cellHeight = $('td',table).first().height();
var cellWidth = $('td',table).first().width();
var runningTop = 0;
$('tr',table).each(function(i,row) {
    var rowCells = $(this).find('td');
    $(this).height(cellHeight*(rowCells.length))
    rowCells.each(function(x,cell) {
        $(cell).css({ "position": "relative","top":(cellHeight*x)+runningTop,"left": "-"+(cellWidth*(x))+"px" });
        runningTop = runningTop+cellHeight;
    });
});

Needs work but here's a Fiddle of the idea http://jsfiddle.net/hPhRX/1/

Solution 3:

make display: inline-table; It worked for me.