Question

I have a table where the content of one column is often narrower than the column itself. I would like the content of this column to be centred like so:

-----------------
| Column Header |
-----------------
|    Content    |
|    Content    |
|    Content    |
-----------------

A quick search turned up the solution of placing the content in a div with style="diplay:table; margin:auto", however this does not work in IE6/7 as they do not recognise table as a display mode. I would prefer to avoid explicitly setting width as the size of the content may vary.

Is there a hack to make this display the same way in IE6/7? Alternatively, is there a different approach which works across IE6/7 and all the major browsers?

EDIT: I cannot use text-align:center; as the content is not plain text.

EDIT 2: Here is simple example in jsFiddle: http://jsfiddle.net/KK5Bp/. The button appears centred under the heading in sane browsers, but is still left aligned in IE6/7. I would like it to appear the same way in IE6/7 as well.

Answer 1

Have you tried text-align: center on <div> inside the relevant table cells?

<table>
    <thead>
        <tr>
            <th>Very Long Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="text-align: center">
                    <button name="short">short</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

text-align:center should work the same in every browser.

http://jsfiddle.net/ambiguous/NYYwd/