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

表格单元格不遵守边距或对象对齐规则。他们在表格中定义了职位。第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

首先，您应该在<tr></tr>周围打上<td id="third-box">...</td>标记来更正您的表格。然后，您应该使用colspan中的#third-box atrribute。

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

上面的内容将为您提供第二行的全表宽度第三个单元格。但是如果你想在'drawing'中生成确切的表（第三个单元格具有相同的大小并以第二行为中心）：

<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 decleration：

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

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

希望这有帮助。

中心将一个表格单元格对齐另外两个

4 个答案: