我如何在同一行中对齐我的文本

Question

在html中的

enter image description here我尝试了很多和文本对齐方法，但我没有得到预期的结果 我希望我的标题标签显示为图像

＆＃13;

＆＃13;

table#tbl {
	valign : top;
	table-layout:fixed;
	word-wrap : break-word;
	text-align:right;
	
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

table#tbl {
	valign : top;
	table-layout:fixed;
	word-wrap : break-word;
	text-align:right;
	
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在vertical-align元素上设置th。您可以使用后代选择器执行此操作：

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>