html table header with text orientation appears strange in pdfkit

I have produced html from pandas styler using following style:

my_styles = [
                {
                    'selector': 'th',
                    'props': [('background-color', 'silver'),
                              ('style', 'bold'), ('text-align', 'left'), ('border', '1px solid black'),
                              ('transform', 'rotate(270deg)'), ('writing-mode', 'vertical-lr')
                              , ('-webkit-transform', 'rotate(270deg)'),('-webkit-writing-mode', 'vertical-rl')]                    
                }, {
                    'selector': 'td',
                    'props': [
                        ('text-align', 'center'), ('border', '1px solid black')]
                }, {
                    'selector': '',
                    'props': [
                        ('max-width', '100px')]
                }
            ]

When I output the html to pdf using pdfkit the output like below:

Can someone help me to fix:

1. the differential height of header row (making all cells in header row with equal height)
2. all column widths also equal?

A jsfiddle version of this problem is located here: http://jsfiddle.net/kfunxj8a/