将一个表格单元格居中对齐在另外两个下方

Question

这就是我想要完成的：

|---------| |----------|
| TableC1 | | TableC2  |
|---------| |----------|
     |------------|
     | TableC3    |
     |------------|

您可以在上面看到这就是我想要完成的。 TableCell1 和 TableCell2 在表格的中心很好地对齐，但是由于我只想在它们下面有一个表格单元格，所以 TableCell3 只是转到一侧，左侧或右侧无关紧要。

这是我如何编写它的sn-p：

HTML：

<table id = "some-boxes">

<tr>
<td id = "first-box">
SOME TEXT101
</td>

<td id = "second-box">
SOME TEXT202
</td>
</tr>

<td id = "third-box">
SOME TEXT303
</td>
</table

CSS：

#first-box{
   width: 100px;
}
#second-box{
   width: 100px;
}
#third-box{
   width: 200px;
   text-align: center;
   margin-left: 50%;
   margin-left: 50%;
}

希望有人能解答我的这个谜团。谢谢你:)

Answer 1

使用colspan 指定您希望<td> 标记占用多少列。

<td id = "third-box" colspan="2">
SOME TEXT303
</td>

这是一个视觉示例。我刚刚启用了边框来演示： http://codepen.io/AlienHoboken/pen/uFlIC

此外，您可以摆脱保证金规则。

Answer 2

表格单元格不遵守边距或对象对齐规则。他们在表格中定义了位置。第 2 行中的第一个单元格将始终从第 1 行中的第一个单元格下方开始。您可以使用 colspan=2 使单元格跨越两列，但它不能与另一个单元格部分重叠，除非您玩跨列的数学游戏。你最好在 div 项目上使用 CSS 定位。

Answer 3

如果您处于无法修改标记的位置，这将起作用：

http://jsfiddle.net/Aam6T/

table#some-boxes, table#some-boxes tr {
  display: block;
  text-align: center;
}

table#some-boxes td {
  display: inline-block;
  border: 1px solid;
}

但是，前面行中的单元格将不再排列。

Answer 4

首先，您应该通过在<td id="third-box">...</td> 周围包裹一个<tr></tr> 标记来更正您的表格。那么你应该在#third-box 中使用colspan 属性。

<table id="some-boxes">
    <tr>
        <td id="first-box">
            SOME TEXT101
        </td>
        <td id="second-box">
            SOME TEXT202
        </td>
    </tr>
    <tr>
        <td id="third-box" colspan="2">
            SOME TEXT303
        </td>
    </tr>
</table>

上面的内容将在第二行为您提供全表宽度的第三个单元格。但是，如果您想在“绘图”中生成精确的表格（第三个单元格大小相同，并以第二行为中心）：

<table id="some-boxes">
    <tr>
        <td id="first-box">
            SOME TEXT101
        </td>
        <td id="second-box">
            SOME TEXT202
        </td>
    </tr>
    <tr>
        <td id="third-box" colspan="2">
            <div id="third-box-inner">
                SOME TEXT303
            </div>
        </td>
    </tr>
</table>

使用额外的 CSS 声明：

div#third-box-inner
{
    width: 100px;
    text-align: center;
    margin-left: 50px;
}

还有一个建议：设置 HTML 属性时，等号前后不要使用空格。

希望这会有所帮助。