Adding a table that has a specified height seems to be adding the height of the thead after the height calculation - See attached screenshots, both should be the same height as the black bar on the left.

In my example I use height 100%, but I've also tried setting the height to the same as the container (in this case 403px) with the same result.

Sample code:

<div style="width:684px;height:403px;position:absolute;">
	<table style="height:100%;">
		<thead>
			<tr>
				<th style="width:46%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br><br></p><p>&nbsp;<br></p></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td style="width: 46%"><p></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3"><p>Total</p></td>
				<td><p>0€</p></td>
			</tr>
		</tfoot>
	</table>
</div>

Is there a workaround for this in the current version of Prince (11.4)? Or when can we expect a fix? Setting row heights on every row isn't an option (I've seen this suggested in the past)

1. Screen Shot 2018-06-12 at 8.21.02 AM.png‎ 10.1 kB ‎
   Browser
2. Screen Shot 2018-06-12 at 8.22.56 AM.png‎ 12.8 kB ‎
   Prince

We will investigate this issue.

Hi,

I can't reproduce this problem with the sample code you have given. The table comes out the correct height, either with a percentage or a length.

Mark

Sorry @markbrown - I just re-ran the tests myself (we have much more going on than the example I gave above)

It looks like there's a line of CSS causing this:

table > thead > tr, table > tfoot > tr { height: 1px; }

Here's a more appropriate code sample (that actually demonstrates the issue):

<style type="text/css" rel="stylesheet" media="all">

thead {
	background-color: red;
}

tfoot {
	background-color: black;
	color: white;
}

tbody {
	background-color: grey;
}

table > thead > tr,
table > tfoot > tr { 
	height: 1px; 
}

</style>


<div style="width:10px;height:403px;position:absolute;top:20px;left:20px;background-color:black;"></div>

<div style="width:684px;height:403px;position:absolute;top:20px;left:40px;">
	<table style="height:100%;width:100%">
		<thead>
			<tr>
				<th style="width:46%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br></p></th>
				<th style="width:18%"><p>&nbsp;<br><br></p><p>&nbsp;<br></p></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td style="width: 46%"><p></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
				<td style="width: 18%"><p>&nbsp;<br></p></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3"><p>Total</p></td>
				<td><p>0€</p></td>
			</tr>
		</tfoot>
	</table>
</div>

We're using the height: 1px trick to make sure the header/footer don't take up more height than they actually have to - leaving the <tbody> to take up the remaining height, instead of the default sharing the height by 1/3 for each element

Thanks, I can see the issue now. The height property sets a minimum height for the table, which we try to spread across rows that don't have a given height. But we don't try to readjust these heights once some row exceeds its allocated amount, so the end result is that the table itself exceeds the height that was given.

We will add this issue to the roadmap.