Aligning multiple tables

[AndoSam]

Hi,

This is probably a very basic formatting question but I've been stuck for some time...
I am attempting to display two tables on one page. One table giving an overall pass/fail report for a number of tests and the other for drtailing exactly which passed etc.

I am having no difficulty with getting the tables to display etc. (which I thought I might), its just when I render the page the second table appears at the very bottom with a large gap between the two. I would like them to be closer together, ideally with one line in between just for clarity.

My code is in the following structure:

<tr style="height: 100%; vertical-align: top">
      <td colspan="2">
         <table class="TABLE1">
            <tr class="HEAD">                  
               <td class="HEAD">Test</td>
	       <td class="HEAD" style="width: 80px">Status</td>
            </tr>

            <xsl:apply-templates select="//master" />
         </table>
      </td>
   </tr>
   
   <tr style="height: 100%; vertical-align: middle">
      <td colspan="2">
         <table class="TABLE2">
            <tr class="HEAD">                  
               <td class="HEAD">Test</td>
	       <td class="HEAD" style="width: 80px">Status</td>
            </tr>

            <xsl:apply-templates select="//tests" />
         </table>
      </td>
   </tr>

These have their own templates, master and tests which seem to be doing everything I expect as well.

Any suggestions

 

[tsuji]

This is not strictly an xml problem. It is a css/html problem.

http://www.tek-tips.com/threadminder.cfm?pid=215

The problem probably is because the enveloping table have some height style other than the default auto, such as itself be 100%. Setting table height is itself a contingent on many factors, mode (quirk or standard) and/or browser versions. If it is set to 100% and in mode that support it, after the space occupied by the row, the first row of 100% height tends to occupy all the spaces available leaving the nominal space for the following row (even that still take height attribute 100%)... Hence, there would be a gap more or less pronounced between the two child tables in the cells. It is a messy affair.
In any case, if the enveloping table has style of height 100%, take it out, if you can.
Otherwise, if you need detailed help, ask the above-mentioned forum with the effective transformed html script (not the xslt script) properly characterised.