代码之家 › 专栏 › 技术社区 › ddd

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

angular-ui-bootstrap datatable angular

ddd · 技术社区 · 6 年前

我正在和Angular5一起开发网站。其中一个组件在数据表中显示数据。

<div>
<table dataTable class=“table row border hover”*ngif=“this.temp_var”>
<thead>
<tr>
<th>门ID</th>
<th>通电天数</th>
<th>循环计数</th>
<th>错误代码</th>
<th>错误名称</th>
</tr>
</thead>
<t车身>
<tr*ngfor=“让rec of this.data”>
<td>rec.doorid</td>
<td>记录天数</td>
<td>rec.controllerCycleCount</td>







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




width=80%<div>

1 回复 | 直到 6 年前

Andriy 6 年前

尝试将80%的宽度添加到将表与搜索和条目框包装在一起的DIV中(DIV with ID datatables\u table\u 0\u wrapper in my example)

<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=“行边框悬停数据表无页脚”
dataTable=“”
id=“dataTables_Table_0”
role=“网格”
aria describedby=“数据表\u table_0_info”>
…
</table>
width:80%;margin:0 auto;on this wrapper div should make it 80%wide and centraled:(代码>宽度:80%;页边:0 auto;on this wrapper div should make it 80%wide and central



)

<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%宽并居中:

推荐文章

Shubham · 如何在R中查找数据表的两个多类别列之间的差异/setdiff()

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

ParaPrototype · 如何在单列可搜索数据表中求和合计以及如何添加日期范围

2 年前

Jafar Khan · 如何使用laravel和ajax方法添加angular 12数据表

2 年前

ColinA · Powershell从datatable更改输出对象名称

2 年前

Davide Vitali · 填充后的ListView为空

6 年前

mfg · 分页不显示在datatable中

6 年前

znstrider · Bokeh-更新渲染器和DataTable的源-使用回调?

6 年前

DotNetSpartan · 如何在datagrid中绑定到数据表的空行的第一个单元格上设置光标

6 年前

Gerle Batde · 如何使用Datatable C跳过=<2个空行?

6 年前