How to display the rows (<tr>) of a table on a single line(Internet Explorer 6,7)?

Question

Hi all,

I want to display the rows of a table on a single line. This is a problem in Internet Explorer 6 and 7 because setting the float attribute to left and the display to block won't do. And changing <tr>s to <td>s won't do either as these html elements are generated by a framework's code that i am not allowed to change.

Edit: Some of you wanted the code, i dunno why it would help but here it is (specific images and classes have been edited out, the code is not available online, some-class may not be the same class everywhere)

    <table class="some-class" width="100%" border="0"
cellspacing="0" cellpadding="0">
  <tr class="some-class">
    <td class="some-class">
      <a href="#"><img src=pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src=pic.jpg"/></a>
          <p></p>
          <p></p>
        </div> <a href="#"><img src=pic.jpg"/></a>
      </div>
    </td>
  </tr>
   <tr class="some-class">
    <td class="some-class">
      <a href="#"><img src=pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src=pic.jpg"/></a>
          <p></p>
          <p></p>
        </div> <a href="#"><img src=pic.jpg"/></a>
      </div>
    </td>
  </tr>
   <tr class="some-class">
    <td class="some-class">
      <a href="#"><img src=pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src=pic.jpg"/></a>
          <p></p>
          <p></p>
        </div> <a href="#"><img src=pic.jpg"/></a>
      </div>
    </td>
  </tr>
</table>

Answer 1

I'm afraid I don't think this can be done in a sane and valid manner. float: left in a table is absolutely taboo. Edit: This seems to be valid (!) and possible by taking away each element's table-* display property, but isn't well supported by IE.

The only workable solution I can think of is manipulating the table elements using JavaScript/jQuery, and making the needed conversions (trs into tds...).

The obvious downside of that is that it won't work with JavaScript turned off.

Answer 2

Have you thought about reformatting on the client using Javascript and/or a Javascript library like JQuery? It should be possible to manipulate the DOM to create an appropriate display structure possibly replacing the table elements with DIVs, for example.

Answer 3

Well, there is a css solution that is not without it's drawbacks, so I cannot say I whole-heartedly recommend it (and has not been thoroughly tested cross browser), but for purposes of "possibility" I offer it:

A slight modification of your html for illustration (added some classes to the tr tags):

<table class="some-class" border="0" cellspacing="0" cellpadding="0">
  <tr class="some-class r1">
    <td class="some-class">
      <a href="#"><img src="pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src="pic.jpg"/></a>
          <p></p>
          <p></p>
        </div> 
        <a href="#"><img src="pic.jpg"/></a>
      </div>
    </td>
  </tr>
  <tr class="some-class r2">
    <td class="some-class">
      <a href="#"><img src="pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src="pic.jpg"/></a>
          <p></p>
          <p></p>
        </div>
        <a href="#"><img src="pic.jpg"/></a>
      </div>
    </td>
  </tr>
  <tr class="some-class r3">
    <td class="some-class">
      <a href="#"><img src="pic.jpg"/></a>
      <div class="some-class">
        <div class="some-class">
          <a href="#"><img src="pic.jpg"/></a>
          <p></p>
          <p></p>
        </div>
      <a href="#"><img src="pic.jpg"/></a>
      </div>
    </td>
  </tr>
</table>

Some things to note before looking at the css:

1. I added display: block to some of the table elements for display purposes in FireFox, IE6-7 will ignore those. You may want to just target this solution to IE6-7 if you decide that it fits your purposes.
2. Some of this styling was illustration purposes.
3. This illustration uses a set and equal width to the td elements and is only valid for 3 rows. Numbers would have to change based on # of rows to display in line. Basically, my point is, this may not work for your situation, but it at least illustrative that given the right circumstances, it is possible to do what you requested with css only.

The css:

html, body {width: 100%; padding: 0; margin: 0;}
table {position: relative; table-layout: fixed; width: 33%; display: block;}
tr {position: absolute; width: 100%;}
td { border: 1px solid red; width: 100%; display: block;}
tr.r1 {left: 0;}
tr.r2 {left: 100%;}
tr.r3 {left: 200%;}

This would ideally have rows with set heights, as the table ends up with a height: 0 since the data within it is position: absolute, so setting a height to the table would be recommended if possible.