如何将数据表放在中间而不占用整个宽度

Question

我正在使用 Angular5 开发网站。其中一个组件在 Datatable 中显示数据。

<div>
  <table datatable class="table row-border hover" *ngIf="this.temp_var">
    <thead>
      <tr>
        <th>Door ID</th>
        <th>Powerup Days</th>
        <th>Cycle Count</th>
        <th>Error Code</th>
        <th>Error Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let rec of this.data">
        <td>{{rec.doorId}}</td>
        <td>{{rec.days}}</td>
        <td>{{rec.controllerCycleCount}}</td>
        <td>{{rec.errCode}}</td>
        <td>{{rec.errName}}</td>
      </tr>
    </tbody>
  </table>
</div>

table 占据了整个页面的宽度。

所以我把table的宽度改成了80%。

<table datatable class="table row-border hover" *ngIf="this.temp_var" style="width:80%">

现在 table 本身水平缩小了，但搜索框、页面等所有其他内容仍在远端。

有没有办法让它们与 table 的实际宽度对齐？我试图将 width=80% 移动到外部 <div>，但它没有帮助。

Answer 1

尝试将 div 的宽度增加 80%，将 table 与搜索框和条目框（在我的示例中，div 的 ID 为 DataTables_Table_0_wrapper）

<div id="DataTables_Table_0_wrapper" 
     class="dataTables_wrapper no-footer" 
     style="width: 80%; margin: 0 auto;">
  <div class="dataTables_length" id="DataTables_Table_0_length">
    ...
  </div>
  <div id="DataTables_Table_0_filter" class="dataTables_filter">
    ...
  </div>
  <table class="row-border hover dataTable no-footer" 
         datatable="" 
         id="DataTables_Table_0" 
         role="grid" 
         aria-describedby="DataTables_Table_0_info">
    ...
  </table>

width: 80%; margin: 0 auto; 在这个包装上 div 应该使它 80% 宽并居中：

如何将数据表放在中间而不占用整个宽度

How to place datatable in the middle and not take up the whole width

datatable

angular-ui-bootstrap

angular