html - 如何在 HTML/CSS 中将表格相对于一列居中？

Question

我正在寻找的是类似这样的东西:

        Center
          |
+----+---------+
|    |    |    |
+----+---------+
     +---------+----+
     |    |    |    |
     +---------+----+

基本上，我正在尝试构建一个表，其中一些元素将具有前缀(如货币符号)，而其他元素将具有后缀。但是，我希望包含主要数据本身的单元格是相对于中心对齐的单元格，以及它之前或之后的单元格“悬挂”在两侧。我所描述的是否可能，或许更重要的是，是否有一种跨浏览器的好方法？

这是我所指的示例: http://jsfiddle.net/akjs80fs/

在我链接的 fiddle 中，如果它按照我试图实现的格式进行格式化，“X”将位于页面的中心。

Answer 1

一种方法是使用空白列:

按照您提到的方式构建它，但将 x 的 2 个区域留空，并移除这些区域的外边界。

        Center
          |
+----+---------+----+
|    |    |    | x  |
+----+---------+----+
+----+---------+----+
| x  |    |    |    |
+----+---------+----+

您可以使整个表格在页面上居中，或使其向左对齐。没关系，因为表格会自动对齐。让它成为一个 super 简单的表格，就像这样。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="noborder">4</td>
  </tr>
  <tr>
    <td class="noborder">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

相应地添加CSS:

table td {
    border:1px solid black;
}
.noborder {
    border:0px;
}

做了一个JSFiddle为了好玩