jquery - 数据表列宽重置问题

Question

我想从 js 中为数据表(固定标题)提供最大宽度。

我正在使用以下 js 更新数据表设置:

  var oTable = $('#example').DataTable(
                  {
                    "sScrollY":  200,
                    // "bScrollCollapse": true,
                    // "bAutoWidth": true,
                    // "sScrollX": "100%",
                    // "sScrollXInner": "100%"
   });

但在应用“sScrollY”后，列宽设置不正确。所以，我只想为每个 <th> 重置列宽和 <tr> .

我已经尝试了所有可能的方法。

HTML 代码:-

<section class="panel">
                          <header class="panel-heading">
                              Scheduled Outages
                          </header>
                          <div class="panel-body">
                                <div class="adv-table">
                                    <table  class="display table table-bordered table-striped" id="example1">
                                      <thead>
                                      <tr>
                                          <th>Id</th>
                                          <th>Planned Start Date</th>
                                          <th>Planned End Date</th>
                                          <th>D...</th>
                                          <th class="hidden-phone">Ho...</th>
                                          <th class="hidden-phone">Syst...</th>
                                          <th class="hidden-phone">Area</th>
                                          <th class="hidden-phone">Loc Name</th>
                                          <th class="hidden-phone">Loc Unit</th>
                                      </tr>
                                      </thead>
                                      <tbody>
                                        <tr class="gradeX">
                                          <td>65</td>
                                          <td>01/17/2018 00:00:00</td>
                                          <td>01/22/2018 00:00:00</td>
                                          <td class="center hidden-phone">5</td>
                                          <td class="center hidden-phone">0</td>
                                          <td class="center hidden-phone">Mainline</td>
                                          <td class="center hidden-phone">Kennedy Ave(WO01)</td>
                                          <td class="center hidden-phone">Kennedy Ave</td>
                                          <td class="center hidden-phone">Meter Loopline</td>
                                      </tr>
                                      </tbody>
                                      <tfoot>
                                      <tr>
                                          <th>Id</th>
                                          <th>Planned Start Date</th>
                                          <th>Planned End Date</th>
                                          <th>D...</th>
                                          <th class="hidden-phone">Ho...</th>
                                          <th class="hidden-phone">Syst...</th>
                                          <th class="hidden-phone">Area</th>
                                          <th class="hidden-phone">Loc Name</th>
                                          <th class="hidden-phone">Loc Unit</th>
                                      </tr>
                                      </tfoot>
                                    </table>
                                </div>
                          </div>
                      </section>

图片:-

Answer 1

看看columns.adjust() :

var oTable = $('#example').DataTable({
  sScrollY: 200px,
  initComplete: function() {
    this.api().columns.adjust().draw()
  }
})