Question

假设我有两列的表。我可以使用以下方法使这个表居中：

margin: auto

但是我要说我希望第二列出现在中心。我怎么做？有可能吗？

编辑：

这是我想要实现的目标：

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

第二列位于page / div的中心。如果表格不可能用divs做这个怎么办？

Answer 1

另一种选择是使用<td>为每个<th>或text-align: center元素设置样式。

Answer 2

是的，这是可能的 - 这是如何：

<!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>

如您所见，您需要将内容包装在第二列中，因为无法在元素上设置边距。另一方面，您可以在第二列中的所有s上将padding-left和padding-right设置为25％，但这不会让您有机会在“单元格”上设置背景颜色和边框。 / p>

Answer 3

嗯，你可以，虽然我必须警告你，这样的布局有几个问题。在使用之前一定要了解它们。

所需的HTML是：

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

这里有两层包装。我们使用通常的margin: 0 auto技术将外部容器放在中心位置，而内部div得到的负左边距等于偏心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;
}

在这里查看：http://www.jsfiddle.net/DfArr/1/

Answer 4

实际上，不，你不能这样做。但是有一个解决方法。这是怎么回事。

首先，您可以调整第一列的宽度，以便第二列将推到中心。

第二种方法是创建另一个列，使其成为3个圆柱表。设置中心列的宽度以将最后一列推到中心，然后删除中心列边框以隐藏它。

Answer 5

非常简单的解决方案......

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

CSS是否可以将表列居中？

5 个答案: