how do i align my th text in a same line - html

Question

enter image description herein html i tried lots of th and text-align methods but i m not getting the expected results
I want my heading tag to be displayed like the image
table#tbl {
valign : top;
table-layout:fixed;
word-wrap : break-word;
text-align:right;
}
<table border="2px" style="width:100%;margin-top:8px;" id="tbl">
<tr>
<th width="3%">Sr no.</th>
<th style="text-align:left" width="25%" >Item</th>
<th width="15%">HSN</th>
<th width="5%">Qty</th>
<th width="10%">Rate/ Item</th>
<th width="10%">Discount/ Item</th>
<th width="10%">Taxable Value</th>
<th width="8%">SGST</th>
<th width="8%">CGST</th>
<th width="12%">Total</th>
</tr>
table#tbl {
valign : top;
table-layout:fixed;
word-wrap : break-word;
text-align:right;
}

Answer 1

You need to set the vertical-align on the th elements. You can do that using the descendent selector like this:
table#tbl th {
vertical-align: top;
}
table#tbl{
table-layout: fixed;
word-wrap: break-word;
text-align: right;
}
table#tbl th {
vertical-align: top;
}
<table border="2px" style="width:100%;margin-top:8px;" id="tbl">
<tr>
<th width="3%">Sr no.</th>
<th style="text-align:left" width="25%">Item</th>
<th width="15%">HSN</th>
<th width="5%">Qty</th>
<th width="10%">Rate/ Item</th>
<th width="10%">Discount/ Item</th>
<th width="10%">Taxable Value</th>
<th width="8%">SGST</th>
<th width="8%">CGST</th>
<th width="12%">Total</th>
</tr>
</table>