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 over 8 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 over 8 years ago by Tony Crockford
  • That did the trick, many thanks. Andrew Turner over 8 years ago