他のテーブルにある2つのテーブルを水平に整列する

Question

私はテーブルを持っており、その中に別のテーブルが2つあります。 問題は、それらが水平に整列していないことです。私はヘッダーが同じ行から始めるようにします。

<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

テーブルを含む<td>要素にvalign="top"を追加するだけです。

参照：http://jsfiddle.net/Wexcode/z8Q5W/