Когда отображать компонент отчета, он отображается под меню?

Question

проблема

второй компонент - таблица html отображается под меню, но мне нужно, чтобы он отображался справа от меню.

Я работаю на angular 7 и у меня есть два компонента

первый компонент - это компонент отчета, содержащийся в левом боковом меню, и это будет выход маршрутизатора на app.component

второй компонент - таблица html существует в компоненте reportdetails и генерируется при щелчке по меню ссылки.

первый компонент отчета содержит меню

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

второй компонент отчета содержит таблицу, отображаемую под меню, и это неправильно

правильное значение мне нужно для отображения справа от меню в виде изображения ниже

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>

скриптовая ссылка, как показано ниже: https://jsfiddle.net/015asjzv/1/

что я пытаюсь

table{
float:right;
width:auto;
}

Последнее обновление см. ссылку здесь

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

он переместил стол слева направо, но мне нужно его сверху рядом с меню, так что я делаю

Answer 1

Итак, на данный момент у меня есть 2 таблицы, обернутые элементами div, поэтому они отображаются в виде блоков (div имеют display: block; по умолчанию)

добавьте еще один div вокруг этих 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;
}

Удачи.

Подробнее о отображении flex можно узнать здесь

Примечание. Это также может быть проблемой компоновки родительского компонента, но исправление будет таким же.