ansaurus

Question

CSS Is it possible to center table column?

Answer 1

A:

Actually, No. You can't do that. But there's a work around. Here's how.

First you can adjust the width of the first column so that the 2nd column will push to the center.

Second approach would be to create another column, that makes it 3 columned table. Set the width of the center column to push the last column to the center and remove the center column border to hide it.

samer 2010-09-02 22:03:02

Answer 2

+1 A:

Yes, this is possible - here's how:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Center second column</title>

<style type="text/css">
.center-second-column table {
    margin: auto;
}
.second-column {
    margin-left: 25%;
    margin-right: 25%;
    background-color: #ddd;
}
</style>
</head>

<body>
<div class="center-second-column">
<table width="200" border="1">
  <tr>
    <td>col 1</td>
    <td><div class="second-column">col 2 with some content</div></td>
  </tr>
  <tr>
    <td>col 1</td>
    <td><div class="second-column">even more content in this col 2</div></td>
  </tr>
  <tr>
    <td>col 1</td>
    <td><div class="second-column">col 2</div></td>
  </tr>
</table>
</div>
</body>
</html>

As you can see, you need to wrap the content in your second column in a , as it is not possible to set margin on elements. On the other hand, you could set the padding-left and padding-right to 25% on all the s in the second column, but that wouldn't give you the opportunity to set background colours and borders on the "cells".

Christian Nesmark 2010-09-02 22:49:47

Thanks for the answer but what I want to do is center column not contents of column.

l245c4l 2010-09-02 23:02:16

What exactly do you mean? Do you want to center the <td> tags themselves? Remember, if you wrap the content in the second column in <div> tags with fixed width, you can center those <div>s and have their content left-aligned.

Christian Nesmark 2010-09-03 07:04:05

Updated the code with something that looks more like your requirements.

Christian Nesmark 2010-09-03 07:21:59

Answer 3

+1 A:

Well you can, although I have to warn you there are several problems with a layout like this. Be sure to understand them before using this.

The HTML required is:

<div id="container">
    <div id="inside">
        <div id="offside">
        </div>
        <div id="center">
        </div>
    </div>
</div>

There are two layers of wrappers here. We using the usual margin: 0 auto technique with the outside container to center it, while the inside div gets a negative left margin equal to the width of the off-center div.

#container {
    width: 300px;
    margin: 0 auto;
}

#container #inside {
    margin-left: -100px;
    overflow: hidden;
}

#container #inside div {
    float: left;
    height: 400px;
}

#container #inside #offside {
    width: 100px;
    background-color: #ddd;
}

#container #inside #center {
    width: 300px;
    background-color: #f9f9f9;
}

Have a look at it here: http://www.jsfiddle.net/DfArr/1/

Yi Jiang 2010-09-03 07:06:15

Yes, that's what I wanted. But can you tell me what are possible problems with it?

l245c4l 2010-09-03 11:53:35

@l245c4l: The most obvious problem is that the usable width for your site would be reduced. Working from the standard 960px width, and, say a 200px sidebar, this means that the maximum width your site can be would be 760px. This is not an insignificant reduction, and you'll need to adjust your design along with it. Also, depending on your design, the site may look unbalanced.

Yi Jiang 2010-09-03 12:01:51

ansaurus

tags:

views:

answers:

CSS Is it possible to center table column?

related questions