CODEWITHSUNDEEP
csshtml-table
Nakilon
Nakilon

Reputation: 35074

Can CSS place <td> tags one under another like <tr> 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 position them vertically, like if they were trs or divs. But:

  1. I'm afraid to break something while editing website HTML (probably it is java template);
  2. I don't want to patch page with JS, because it would be an additional problem/question of how/where to put that code.

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.

Upvotes: 1

Views: 18851

Answers (3)

Monish Lalchandani
Monish Lalchandani

Reputation: 51

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

Upvotes: 0

TheGerbil
TheGerbil

Reputation: 31

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/

Upvotes: 0

Arkana
Arkana

Reputation: 2889

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

Upvotes: 7

Related Questions