html - 水平对齐位于另一个表中的两个表

Question

我有一张 table ，里面还有另外两张 table 。 问题是它们没有水平对齐。我希望标题从同一行开始。

<TABLE  CELLPADDING="10" >
    <tr>
    <td>
     <!--This is Process Info Table-->
    <table border="1" >
        <tr bgcolor="#006699">
            <th colspan="2" ALIGN="LEFT">Process Info:</th>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Product Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ProductName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Process Window Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ProcessWindowName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Oven Recipe Name:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/OvenRecipeName"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Conveyor Speed Units:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/ConveyorSpeedUnits"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Temperature Scale:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/TemperatureScale"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Number of TCs:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/NumberOfTCs"/></td>
        </tr>
        <tr>
            <td style='padding:2px 100px 2px 2px'>Number of Statistics:</td>
            <td style='padding:2px 100px 2px 2px'><xsl:value-of select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/ProcessInfo/NumberOfStatistics"/></td>
        </tr>
    </table>
    </td>
    <td>
    <!--This is Statistics Limits Table-->
    <table border="1" >
        <tr bgcolor="#006699">
            <th ALIGN="LEFT">Statistics Limits:</th>
            <th ALIGN="LEFT">Low</th>
            <th ALIGN="LEFT">Target</th>
            <th ALIGN="LEFT">High</th>
        </tr>
        <xsl:for-each select="GeneralReflowProcessReport/Results/GeneralReflowProcessReportEntry/StatisticsLimits/Statistics/StatsticsEntries">
            <tr>
                <td style='padding:2px 100px 2px 2px'><xsl:value-of select="StatisticsLimitsName"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="Low"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="Target"/></td>
                <td style='padding:2px 20px 2px 2px'><xsl:value-of select="High"/></td>
            </tr>
        </xsl:for-each>
    </table>

        </td>
    </tr>
    </TABLE>

谢谢。

Answer 1

只需添加 valign="top"给你的<td>包含表格的元素。

参见:http://jsfiddle.net/Wexcode/z8Q5W/