我有一个网格布局，左列中的一些导航药丸设置为“col-auto”，因为我希望这些只占用内容的自然宽度空间。

在第二个表中，我希望有一个水平滚动条的大表。我能够做到这一点，除了表格总是跳到导航栏下面，我不能让它呈现到右边。

参见附件:https://jsfidle.net/3vxhd6jf/3/

<div class="container">
   <div class="row">
     <div class="col-auto"> <!-- Should only take up the necessary space -->
       <!-- Nav tabs -->
       <div class="d-flex align-items-start">
       .....
       </div>
     </div>
     <div class="col"> <!-- Should take up the rest of the space -->
       <div class="tab-content">
         <div class="tab-pane active" id="tab-data" role="tabpanel" aria-labelledby="nav-data">
           <div id="div-data-container" class="mb-3 table-responsive">
             <!-- The table -->
             <table class="table table-sm table-striped">
             .....
             </table>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>    

我想要实现的是呈现导航药丸右边的表，就像当您单击'JSON'药丸时呈现textarea一样。

你能帮忙吗？