0

I have seen table tr coming in horizontal fashion. Like following:

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="height:100px">
    <td valign="bottom">January</td>
    <td valign="bottom">$100</td>
  </tr>
</table>

My requirement is:

 Month   January
 Savings $100

But, not with following code & with CSS - Vertical alignment. Bcz, I am using angular ngFor which I need to display 1/2/3 columns dynamically.

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <td valign="bottom">January</td>
  </tr>
  <tr style="height:100px">
    <th>Savings</th>
    <td valign="bottom">$100</td>
  </tr>
</table>

Current solution I know is:

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <td *ngFor="let i of is">{{i.a}}</td>
  </tr>
  <tr style="height:100px">
    <th>Savings</th>
    <td *ngFor="let i of is">{{i.b}}</td>
  </tr>
</table>

Here I need to write ngFor multiple times. I did this with div and css, but I need all row cells in same height dynamically - which I am not seeing with that. How can I display table tr vertical in direction with CSS?

Bhadra
  • 29
  • 1
  • 9

1 Answers1

0

Would you please try with following way, it seems working fine.

#vertical thead,#vertical tbody{
    display:inline-block;
 }
 
#vertical thead tr th {
    text-align: left;
}
<table id="vertical">
 <thead>
  <tr>
   <th colspan="3">Month</th>
  </tr>
  <tr>
   <th colspan="3">Savings</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>January</td>
  </tr>
  <tr>
   <td>$100</td>
  </tr>
 </tbody>
</table>

thanks !

Robin Hossain
  • 711
  • 9
  • 12
  • Thanks for your answer. Please refer this https://jsfiddle.net/4n8gvsLm/2/, how can I correct this row alignment dynamically? – Bhadra Jul 22 '18 at 06:02