Problems with display: head-table-group

I wonder if somebody me please. I’m using wkhtmltopdf to create a pdf of a page with lots of tables in it. The pdf is being created and all of the styles are working expect for display: head-table-group. I’ve even added !important to it but that’s still not working. It adds a blank th but has no text at all. I’ve tried using a default font and changing the size but that doesn’t make a difference.

The css I’m using is:

thead {
   	display: table-header-group!important;
font-size: 12px!important;
font-family: Helvetica, sans-serif!important;
color: #000!important;
   }

and the html is:

<div class="main">
<div class="table_div">
<div class="table">
<table class="collapsable_table">
<thead>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Genre</th>
<th>Country</th>
<th>Stock level</th>
<th>Year</th>
</tr>
</thead>
<tbody>

<tr class="album_full">
<td><a href="#">True Blue</a></td>
<td><a href="#">Madonna</a></td>
<td>Pop</td>
<td>USA</td>
<td>25%</td>
<td>1984</td>
</tr>

<tr class="album_full">
<td><a href="#">Bad</a></td>
<td><a href="#">Michael Jackson</a></td>
<td>Pop</td>
<td>USA</td>
<td>50%</td>
<td>1988</td>
</tr>

...................

</tbody>
</table>
</div>
</div>
</div>

Thanks for any help anybody can offer

I assume that’s not the only CSS you’re using. Do you have later CSS specifications changing the styles on th and tr elements?

No that’s last bit of css and I’ve checked the inspect element and it’s definitely being rendered - it’s just when it comes to the pdf it’s not showing the font (it added the thead to each page but not the actual headers)

That doesn’t look like a css issue as such but something to do with the implementation of the pdf (although a solution may be in css). I have no prior knowledge of the product though.

There seems to be some documented issues with table-headers so you could try the solution mentioned.

thead, tfoot { display: table-row-group }

Thanks but sadly that didn’t work at all :frowning:

I think you may need to raise an issue on that site as I doubt anyone here has used that product.

A thead element is already display:table-header-group by default so there should be no need to set it anyway,

Otherwise its probably down to either changing the html structure or just trying out various things to see if they have effect. Try targeting the th element inside the thead for your color and font sizes etc.

Thanks, I’ll raise that

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.