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

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>

表格占据了页面的整个宽度。

所以我将表格的宽度更改为80％。

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

现在桌子本身水平缩小了，但是搜索框，页面等所有其他内容仍然处于末端。

有没有办法改变它们以使其与桌子的实际宽度对齐？我试图将width=80%移到外部<div>，但这没有帮助。

Answer 1

尝试为将表格以及搜索和条目框（在我的示例中ID为sandbox的div）包装的div上增加80％的宽度

DataTables_Table_0_wrapper

此包装器div上的

<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> 应该使其宽度为80％并居中：