在表格旁边放置一个 div 并添加滚动条

Question

I have a table and beside that table i need to place a div like shown in the image below. I tried making table float-left and giving width:75% and sidediv float-right and width:25%. it worked but it is not responsive. i need it to be responsive. so i tried using bootstrap grid system but i was unsuccessful and i also need to add scrollbars to table and side div.

the stackblitz link

 .test{ overflow-y: auto !important; height: 100% !important; }

 <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light"> <div class="ml-auto"> <input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" /> </div> </nav> <br /><br /> <section> <div class="w-75 float-left overflow-auto test"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> </section> <br /> <aside> <div class="w-20 float-right overflow-auto test"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> </div> </aside>

Answer 1

Here is my solution, I used bootstrap to make it responsive.

I wrapped your section with .container-fluid class and then wrapped inner components with .row and col-* classes. Open example in full view.

To make it 100% height, I used height: calc(100vh - 54px);

100vh means it takes the height of your viewport.

Subtraction of 54px is done to avoid scrolling of the entire page

 .test { overflow-y: auto !important; height: calc(100vh - 54px); /*54px is height of navbar*/ }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light"> <div class="ml-auto"> <input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" /> </div> </nav> <br/><br/> <div class="container-fluid"> <section class="row"> <div class="col-md-8 col-12 overflow-auto test"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> <div class="col-md-4 col-12 overflow-auto test"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> <p>{{s}}</p> </div> </section> </div>

Answer 2

If you're using bootstrap, it couldn't be easier. It's designed to make responsive layouts trivial.

If you want to put one div alongside another on larger screens and on top of each other screens, use the col-{size}-{n} CSS classes inside a .container > .row structure, where size is one of xs, sm, md, lg, xl, and 1 >= n <= 12.

Here is your example using col-md-8 and col-md-4. Using the -md- breakpoint means that in screen sizes >= 768px the divs will be alongside each other, and stacked on top of each other < 768px.

https://jsfiddle.net/d5nxwbLj/1/

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- your table here -->
    </div>
    <div>
      <!-- your aside here -->
    </div>
  </div>
</div>

Bootstrap can do a far better job of explaining all of the possibilities: https://getbootstrap.com/docs/4.3/layout/grid/

Answer 3

Instead of using w-75 use Bootstrap Grid System For that wrap all the code into .container > .row > .col-*-* Hope it'll help you

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <section> <div class="container"> <div class="row"> <div class="col-md-8"> <table class="table table-hover"> <tr> <th>Date</th> <th>List Name</th> <th>No. of Entities</th> </tr> <tbody> <tr *ngFor="let items of data | filter: search"> <td>{{ items.date }}</td> <td>{{ items.name }}</td> <td>{{ items.entities }}</td> <td> <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)"> Details </button> </td> </tr> </tbody> </table> </div> <div class="col-md-4"> <div class="alert alert-dark">+Add Description</div> <p>{{s}}</p> </div> </div> </div> </section> </body> </html>