Horizontally align table rows

Question

Is it possible to horizontally align table rows?

What most people will say: "Why do you start a new row if you want the cells to align horizontally?"

My anwser: "I can't control the table structure. I just can't, okay?"

---

Code:

tr {
    display: inline;
}

This looks fine in FireFox, but Internet Explorer 7 aligns the rows vertically. I would prefer not to use JavaScript.

EDIT: Before you start JavaScript-hacking, I already came up with something like this:

String.prototype.replace.call(table.innerHTML,/<\/tr>.*<tr>/,"")

Milligan

why do you start a new row if you want the cells to align horizontally? oh wait, I already asked that.. – Pastry

LOL! This might the worst question since "what's the meaning of life?" – Milligan

I am sure I am missing something - jsfiddle.net/nJUZM/1 – Barricade

help.lockergnome.com/office2/… – Barricade

@ Jawad: Your example doesn't work in IE 7. Your second link didn't have a CSS solution, but a structural solution. I can't change the structure of the table, because it's generated by the server... – Milligan

@bopjesvla: Maybe if you would go deeper into your goal, you could find the answer. So, your server is producing something and you cannot control the format?! Have you tried asking about that script in your server..like if its some server-side-stats system..maybe somebody knows how to edit the source.. That would be the most neatest way. But definitely +1 question, since the objectives are very clear and its a nice challenge.. – Chaulmoogra

Shared hosting s*cks balls ^^ – Milligan

Answer 1

What about this?

Code:

table tr { display: table-cell; };

Hope I helped.

Peralta

Answer 2

Try using float:left; instead of displaying it inline.

Mafaldamafeking

This will do just fine. Might need to drop in a width assignment, but it should be OK by default. – Bethannbethanne

I think you're using a higher version... I'm using IE 7.0.5730.13 – Milligan

Ok i'll check back when I get to work - I have multiple versions of IE there. Good luck until then :) – Mafaldamafeking

Thanks! I'm not in a hurry :p – Milligan

Yeah, AlienWebguy said he would try, but I don't think he figured it out. He would have answered, obviously. – Milligan

Answer 3

If you want to center the content of tr then write it as

tr {width:100%, text-align:center} 

If you want to give an exact width and center the whole table, then do this:

table {width:100px (exact width), margin:0 auto; text-align:center}

If you are having an issue with alignment float:left; will fix it.

Hoban

-1 He said he want's to align <tr>'s side by side, not center align anything, – Mafaldamafeking

I'm sorry, but I don't want to center the rows, but all rows should be on one line. – Milligan

We're trying to help each other in this community, and I wanna help you.. why did you downvote me? Are you happy now? Thx very much – Hoban