私は、HTML内の同じライン

Question

enter image description hereで私の目のテキストは、私は目とテキスト整列方法の多くを試みたが、イムは、私は私の見出しタグが画像

のように表示させたい 期待される結果を得ていないかを揃えますか

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

<table border="2px" style="width:100%;margin-top:8px;" id="tbl"> 
 
\t <tr> 
 
\t  <th width="3%">Sr no.</th> 
 
\t  <th style="text-align:left" width="25%" >Item</th> 
 
\t \t <th width="15%">HSN</th> 
 
\t \t <th width="5%">Qty</th> 
 
\t \t <th width="10%">Rate/ Item</th> 
 
\t \t <th width="10%">Discount/ Item</th> 
 
\t \t <th width="10%">Taxable Value</th> 
 
\t \t <th width="8%">SGST</th> 
 
\t \t <th width="8%">CGST</th> 
 
\t \t <th width="12%">Total</th> 
 
\t </tr>

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

Answer 1

th要素にvertical-alignを設定する必要があります。あなたは、このような子孫セレクタを使用していることを行うことができます。画像はどこを

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>