html - 将表格及其内容移动到更大单元格的顶部和底部

Question

如何将标题为“border one”和“border two”的行移动到它们所在单元格的顶部和底部？如果我尝试填充顶部/底部，它会在放大/缩小时弄乱结构。

这是一个 fiddle :http://jsfiddle.net/0uzjyxa5/

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="680" height="942" style="border-top: 1px solid white;">

    <td style="width: 288px; height:auto;">

    </td>

    <td>
        <table border="1" width="100%">
            <tr><td>border top</td></tr>
        </table>

        <table border="1" width="100%">
            <tr><td>venue info</td></tr>
        </table>

        <table border="1" width="100%">
            <tr><td>border bottom</td></tr>
        </table>
        <td style="width:17px;"></td>
    </td>
    </table>

Answer 1

您可以使用

对齐表格数据

table td {
   vertical-align: bottom;
}

或

table td {
   vertical-align: top;
}