Question

我正在使用bootstrap-table，并想要一个包含resizable和large列的表格。

当我有更多列时，会启动水平滚动条。当我想使列可调整大小时，由于colResizable插件中的css规则.JColResizer{ table-layout: fixed;}，水平滚动条会被销毁。

可调整大小的扩展程序取决于colResizable插件和第56行

t.addClass(SIGNATURE).attr(ID, id).before('<div class="JCLRgrips"/>');

被添加到表（t变量）JColResizer类（SIGNATURE变量）中。如果我删除此规则，则会再次显示水平滚动条，但列不可调整大小。

HTML

 <table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-pagination="true" data-show-filter="true" data-filter-control="true" >
   <thead>
      <tr>
         <th data-field="CustomerName">CustomerN</th>
         <th data-field="ProjectName">ProjectN</th>
         <th data-field="ProjectType">ProjectT</th>
         <th data-field="ProjectDetails">ProjectD</th>
         <th data-field="ProjectLocation">ProjectL</th>
         <th data-field="ProjectTiming">ProjectT</th>
         <th data-field="ProjectTeam">ProjectT</th>
         <th data-field="ProjectStatus">ProjectS</th>
         <th data-field="ProjectProgress">ProjectP</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
      <tr>
         <td>GE Capital Corporation</td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no.\n"+ 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+ 
            "nominati te, reque causae prompta eos ex. Putent \n"+
            "torquatos mei ei. Te verear offendit per. Vix eu erant\n"+ 
            "doctus delenit, et copiosae indoctum accommodare eum.\n"+ 
            "Errem tritani in qui, te vis legere saperet corpora.\n"+ 
            "Eu mei nobis pertinacia, in has putent virtute voluptua,\n"+ 
            "ne probo dicta utinam nam."
         </td>
         <td>Norwalk, CT</td>
         <td>Feb-Aug 2015</td>
         <td>John, Adam, Pete</td>
         <td>Running</td>
         <td>Empty</td>
      </tr>
   </tbody>
</table>

的javascript

$('#mainTable').bootstrapTable({
    resizable: true
});

如果您添加此css规则

.JColResizer{
    table-layout: inherit;
}

启动水平滚动条，但列不可调整大小。

修改//

我删除了.JColResizer{table-layout:fixed;}并在colResizable插件中的$(tb).css('table-layout','auto');函数末尾的{和} $(tb).css('table-layout','fixed');中添加了var init = function( tb, options)。现在它以某种方式工作......

问题是现在列不能小 - 调整大小比默认渲染大小（minWidth参数不起作用）。

具有大且可调整大小的列的Bootstrap表

0 个答案: