Log in / Register

Forum › How do I...?

Really simple table. float tfoot to bottom of last page

mark_anderson_us
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:

pdf.jpg


Any help appreciated

Regards

Mark


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <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;}
 					
					

				    </style>
    </head>
    <body><table>
            <thead>
                <tr>
                    <td style="background: red; font-size: 128px;">Header</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td style="background: blue; font-size: 128px;">Footer</td>
                </tr>
            </tfoot>
            <tbody>
                <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>
            </tbody>
        </table></body>
</html>
  1. pdf.jpg‎ 42.1 kB ‎
    PDF
  2. simple table.pdf‎ 12.5 kB
mikeday
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.
mark_anderson_us
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.

Regards

Mark