I know I should not use tables, and I have more or less got used to working without them but for this particular job I need to use something called a horizontal looper which automatically builds itself within a table.

I have the code within a centered div but my problem is that I want to also centre the table within the div and it appears to justify left by default.

Because the content is built dynamically (and I have the horizontal looper set to build in to a maximum of 4 columns), if there are only 2 columns in the view then I want these centered on the page, rather than left justified.

How can I force the table to be centered regardless of the number of columns using CSS?

  • Just a note on your "I know I should not use tables" - Tables are not a bad thing as long as you use them properly. Use them for "tabular data" (subjective, I know) and not for page layout and you're good :) Olly Hodgson about 10 years ago

1 answer

This was chosen as the best answer
div#looper {text-align:center;}

div#looper table{margin: 0 auto; width: 90%; text-align: left}

ought to do it for something like:

<div id="looper">

(text-align:center for older browsers, width less than the container or it will always be as wide as it can be.)

is there any other css affecting it?

Answered about 10 years ago by Tony Crockford
  • That did the trick, many thanks. Andrew Turner about 10 years ago