当显示组件报告详细信息时它显示在菜单下方？

Question

问题

第二个组件 - table html 显示在菜单下方，但我需要它显示在菜单右侧。

我在 angular 7 上工作，我有两个组件

第一个组件是包含在左侧菜单中的报告组件，它是 app.component

上的路由器出口

第二个组件是 table html 存在于 reportdetails 组件上并在单击 link 菜单时生成。

第一个组件报告包含菜单

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

第二个是包含显示在菜单下方的 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>

fiddle link 如下： https://jsfiddle.net/015asjzv/1/

我的尝试

table{
float:right;
width:auto;
}

最后更新参见 link 此处

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

它从左到右移动了 table 但我需要它在菜单旁边的顶部所以我做什么

Answer 1

所以我现在可以看到你有 2 个表被 divs 包裹，这就是为什么它们显示为块（divs 有显示：块；默认情况下）

在这 2

周围再添加一个 div

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

祝你好运。

您可以了解有关 display flex 的更多信息here

注意：这也可能是父组件布局的问题，但修复方法是一样的。

当显示组件报告详细信息时它显示在菜单下方？

When display component reportdetails it display below menu?

html

javascript

css

angular-components

angular7