Forum How do I...?

Really simple table. float tfoot to bottom of last page

Hi Guys

below is some html generated from XSL. I'm trying to get the tfoot to float to bottom of last page as shown by arrow below. Instead I get this:


Any help appreciated



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
        <title>Table Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <style type="text/css">
				/* Common settings for all page  */		             
				 @page {
				 			size:  8.5in 11in; 
		               		margin-top: 0.2in;
		               		margin-bottom: 0.2in; 
		               		margin-left: 0.2in; 
		               		margin-right: 0.2in; 

					body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; width: 100%; margin-right: auto; margin-left: auto;}
					table {border-spacing: 0px; border-collapse: collapse;  width: 100%; }
					td {padding: 1px; border-width: 0px; border-style: solid;  border-color:blue; border-collapse: collapse; border-spacing: 0px; }
					th {padding: 1px; border-width: 0px; border-style: solid;  border-color:red; border-collapse: collapse; border-spacing: 0px;}

                    <td style="background: red; font-size: 128px;">Header</td>
                    <td style="background: blue; font-size: 128px;">Footer</td>
                <tr><td>Row 1</td></tr>
                <tr><td>Row 2</td></tr>
                <tr><td>Row 3</td></tr>
                <tr><td>Row 4</td></tr>
                <tr><td>Row 5</td></tr>
                <tr><td>Row 6</td></tr>
                <tr><td>Row 7</td></tr>
                <tr><td>Row 8</td></tr>
                <tr><td>Row 9</td></tr>
                <tr><td>Row 10</td></tr>
                <tr><td>Row 11</td></tr>
                <tr><td>Row 12</td></tr>
                <tr><td>Row 13</td></tr>
                <tr><td>Row 14</td></tr>
                <tr><td>Row 15</td></tr>
                <tr><td>Row 16</td></tr>
                <tr><td>Row 17</td></tr>
                <tr><td>Row 18</td></tr>
                <tr><td>Row 19</td></tr>
                <tr><td>Row 20</td></tr>
                <tr><td>Row 21</td></tr>
                <tr><td>Row 22</td></tr>
                <tr><td>Row 23</td></tr>
                <tr><td>Row 24</td></tr>
                <tr><td>Row 25</td></tr>
                <tr><td>Row 26</td></tr>
                <tr><td>Row 27</td></tr>
                <tr><td>Row 28</td></tr>
                <tr><td>Row 29</td></tr>
                <tr><td>Row 30</td></tr>
                <tr><td>Row 31</td></tr>
                <tr><td>Row 32</td></tr>
                <tr><td>Row 33</td></tr>
                <tr><td>Row 34</td></tr>
                <tr><td>Row 35</td></tr>
                <tr><td>Row 36</td></tr>
                <tr><td>Row 37</td></tr>
                <tr><td>Row 38</td></tr>
                <tr><td>Row 39</td></tr>
                <tr><td>Row 40</td></tr>
                <tr><td>Row 41</td></tr>
                <tr><td>Row 42</td></tr>
                <tr><td>Row 43</td></tr>
                <tr><td>Row 44</td></tr>
                <tr><td>Row 45</td></tr>
                <tr><td>Row 46</td></tr>
                <tr><td>Row 47</td></tr>
                <tr><td>Row 48</td></tr>
                <tr><td>Row 49</td></tr>
                <tr><td>Row 50</td></tr>
                <tr><td>Row 51</td></tr>
                <tr><td>Row 52</td></tr>
                <tr><td>Row 53</td></tr>
                <tr><td>Row 54</td></tr>
                <tr><td>Row 55</td></tr>
                <tr><td>Row 56</td></tr>
                <tr><td>Row 57</td></tr>
                <tr><td>Row 58</td></tr>
                <tr><td>Row 59</td></tr>
                <tr><td>Row 60</td></tr>
                <tr><td>Row 61</td></tr>
                <tr><td>Row 62</td></tr>
                <tr><td>Row 63</td></tr>
                <tr><td>Row 64</td></tr>
                <tr><td>Row 65</td></tr>
                <tr><td>Row 66</td></tr>
                <tr><td>Row 67</td></tr>
                <tr><td>Row 68</td></tr>
                <tr><td>Row 69</td></tr>
                <tr><td>Row 70</td></tr>
  1. pdf.jpg42.1 kB
  2. simple table.pdf12.5 kB
This is actually quite tricky, as tables don't really work this way in CSS. It might even be easier to make it a page header/footer, you just need to know roughly what height is required for the repeating header/footer block.

You can specify a fixed height for tables, and this will be divided over all the rows. This can almost get the desired layout, but probably won't work across more than one page.

Currently I don't think there is an existing construct in CSS for the layout that you are trying to achieve, but we may be able to design one.
Thanks Mike

A footer would be great, but the problem I have is that there's data in the tfoot that relates to the rows, so it all has to stay in the table (I think).

I came up with a workaround where I force page-break after on the tr after 15 rows and on the last page, I get the no of rows and then add one blank row with $remaining_rows * row height as a padding value. This works great but will fail if the test in a row wraps.