When display component reportdetails it display below menu?

Question

problem

second component - table html display below menu but i need it display on right of menu .

I work on angular 7 and I have two components

first component is report component contain on left side menu and it is be router outlet on app.component

second component is table html exist on reportdetails component and generated when click link menu .

first component report contain menu

<p>report-category works!</p>

<table *ngFor="let rep of reportlist">  

     <tr>



            <td>{{rep.reportCategory}}</td>       

    </tr>

    <tr *ngFor="let subrep of subreportlist">

        <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">



                <a href="/reportdetails?id={{subrep.reportID}}">



                        <i class="{{subrep.IconClass}}"></i>

                        <span class="title">{{subrep.reportName}}</span>

                    </a>

        </div>



       </tr>



</table>

second is report component contain table that display below menu and this is wrong

the correct i need is to display right of menu as picture below

reportdetails works!

 <p>reportdetails works!</p>

  <div>
<table class="table table-hover" >  
  <thead>  
    <tr>  

      <th>regulation</th>  
    </tr>  
  </thead>  
  <tbody>  
      <tr *ngFor="let rep of reportdetailslist">
        <td>{{rep.regulation}}</td>  
      </tr>



  </tbody>  
</table>  
<p>reportdetails works!</p>

      <div>

    <table class="table table-hover" >  

      <thead>  

        <tr>  



          <th>regulation</th>  

        </tr>  

      </thead>  

      <tbody>  

          <tr *ngFor="let rep of reportdetailslist">

            <td>{{rep.regulation}}</td>  

          </tr>



      </tbody>  

    </table>  

  </div>

fiddle link as below : https://jsfiddle.net/015asjzv/1/

what I try

table{
float:right;
width:auto;
}

Last Updated see link here

http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file

it moved table from left to right but i need it top beside menu so what i do

Answer 1

So for what I can see at the moment u have 2 tables wrapped by divs that's why they show as block(divs have display: block; by default)

add another div around these 2

<div class='wrapper'>
  // You have to make sure only this divs are direct child of wrapper.
  // div table 1  || you can just remove the div and add table directly
  // div table 2  || as divs with no class dont add any value
</div>
// css
.wrapper {
  display: flex;
}

Good luck.

You can learn more of display flex here

Note: This could also be an issue of the parent component layout, but the fix would be the same.