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

Question

这就是我想要完成的：

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

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

这是我编写它的一个片段：

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

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

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 3

首先，您应该通过<tr></tr>在<td id="third-box">...</td>. 那么你应该colspan在#third-box.

<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 属性时，我不会在等号前后使用空格。

希望这可以帮助。

Answer 4

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