CODEWITHSUNDEEP
css
l245c4l
l245c4l

Reputation: 4165

CSS Is it possible to center table column?

Suppose I have table with two columns. I can center this table by using:

margin: auto

But let's say I want second column to appear in the center. How do I do that? Is it possible?

Edited:

Here is what I want to achieve:

-------------------------------------------------------
|                                                     |
|     ----------------------------------              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     |1 column|        2column        |              |
|     ----------------------------------              |
|                                                     |
|                                                     |
-------------------------------------------------------

Second column is in the center of page/div. If this is impossible with tables how to do it with divs?

Upvotes: 5

Views: 17434

Answers (5)

user4723924
user4723924

Reputation: 49

Very easy solution...

 td:nth-child(2) {text-align:center;}

Upvotes: 4

Joe
Joe

Reputation: 1849

Another option is to style each <td> or <th> element with text-align: center.

Upvotes: 3

Christian Nesmark
Christian Nesmark

Reputation: 576

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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".

Upvotes: 2

Yi Jiang
Yi Jiang

Reputation: 50105

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/

Upvotes: 3

mr.b
mr.b

Reputation: 2708

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.

Upvotes: 0

Related Questions