数据表 - 设置列宽

Posted

技术标签:

【中文标题】数据表 - 设置列宽【英文标题】：Datatables - Setting column width 【发布时间】：2013-11-18 03:12:33 【问题描述】：

我正在尝试设置列的宽度，如下所示：

 var per_page = $("table").data("per_page");
  $(".table").dataTable(
    "aoColumnDefs": [
       "sWidth": "100px", "aTargets": [ 1 ] ,
       "sWidth": "100px", "aTargets": [ 2 ] ,
       "sWidth": "100px", "aTargets": [ 3 ] ,
       "sWidth": "100px", "aTargets": [ 4 ] ,
       "sWidth": "100px", "aTargets": [ 5 ] ,
       "sWidth": "100px", "aTargets": [ 6 ] ,
       "sWidth": "100px", "aTargets": [ 7 ] 
    ],
    "aoColumns" : [
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) 
      if (oSettings._iDisplayLength == per_page)
        return true
      else 
        $.post($(this).data("url"), iDisplayLength: oSettings._iDisplayLength)
          .done(function(data)
            if (data.success)
              per_page = oSettings._iDisplayLength;
          );
      
    
  )

但结果列宽不是我想要设置的。你能帮帮我吗？

更新 1

我已将初始化代码更新如下，但在 IE 9 上遇到了奇怪的行为： 即采用最长的字段，将其划分为 lines ，并将其长度作为该列所有行的默认值。 

  var per_page = $("table").data("per_page");
  $(".table").dataTable(
    sScrollX: "100%",
    aoColumns : [
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
    ],
    bJQueryUI: true,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) 
      if (oSettings._iDisplayLength == per_page)
        return true
      else 
        $.post($(this).data("url"), iDisplayLength: oSettings._iDisplayLength)
          .done(function(data)
            if (data.success)
              per_page = oSettings._iDisplayLength;
          );
      
    
  )

更新 2 我已经更新了如下所示的代码，即 9 中的结果是数据表的标题被调整为新的大小，但表格的其余部分没有被更改，请参见截图http://gyazo.com/282967b051366b18634d4e778205c938 初始化代码：

  var per_page = $("table").data("per_page");
  var datTable = $(".table").dataTable(
    sScrollX: "100%",
    sScrollX: "500px",
    aoColumnDefs: [
           bSortable: false, aTargets: [ 4, 5,6 ] ,
           sWidth: "16%", aTargets: [  1, 2,3,4,5,6 ] ,
    ],
    bJQueryUI: true,
    sAutoWidth: false,
    iDisplayLength: per_page,
    "fnDrawCallback": function( oSettings ) 
      if (oSettings._iDisplayLength == per_page)
        return true
      else 
        $.post($(this).data("url"), iDisplayLength: oSettings._iDisplayLength)
          .done(function(data)
            if (data.success)
              per_page = oSettings._iDisplayLength;
          );
      
    
  )

如何解决此问题？

【问题讨论】：

感谢您的赏金，答案还可以，还是您有其他问题？ :) 回答没问题，谢谢！ 很高兴得到帮助:) 【参考方案1】：

我在您的 Update 2 中看到您使用了sAutoWidth，但我认为您输入了错误的bAutoWidth。尝试改变这一点。

如果问题仍然存在，您还可以向 .table 添加 CSS 规则。

当内容的宽度大于列的标题时，你也应该小心。

所以类似于 1 和 2 的组合：

$('.table').dataTable(
  bAutoWidth: false, 
  aoColumns : [
     sWidth: '15%' ,
     sWidth: '15%' ,
     sWidth: '15%' ,
     sWidth: '15%' ,
     sWidth: '15%' ,
     sWidth: '15%' ,
     sWidth: '10%' 
  ]
);

【讨论】：

be careful when the width of the content is greater than the header of the column.?是什么意思 @mankadanka 您可以看到 OP 声明了 7 列，每列宽度为 15%，这导致我们到达 105% “sWidth”周围缺少引号 @RitchieD no :)【参考方案2】：

你应该使用 datatable 的 "bAutoWidth" 属性并以 %

为单位指定每个 td/列的宽度 
 $(".table").dataTable("bAutoWidth": false , 
aoColumns : [
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "15%",
       "sWidth": "10%",
    ]
);

希望这会有所帮助。

【讨论】：

【参考方案3】：

我的方法

$('#table_1').DataTable(
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
         data: 'id', name: 'id' , width: '50px', class: 'text-right' ,
         data: 'name', name: 'name' width: '50px', class: 'text-right' 
    ]
);

【讨论】：

【参考方案4】：

这是我让它工作的唯一方法：

JS：

columnDefs: [
             "width": "100px", "targets": [0] 
        ]

CSS：

#yourTable
    table-layout: fixed !important;
    word-wrap:break-word;

CSS 部分不太好，但可以完成工作。

【讨论】：

【参考方案5】：

我可以告诉你另一种简单的方法来固定 html 中数据表的宽度。

使用

<colgroup>
    <col >
    <col >
</colgroup>

下面是数据表的示例代码：

         <table class="table datatable">
                                <colgroup>
                                    <col >
                                    <col >
                                    <col >
                                    <col >
                                </colgroup>
                                   <thead>
                                        <tr>
                                            <th>User Id</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                        </tr>
                                    </thead>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                                        <tr>
                                            <th>alpha</th>
                                            <th>beta</th>
                                            <th>gama</th>
                                            <th>delta</th>
                                        </tr>
                            </table>

【讨论】：

【参考方案6】：

你可以定义sScrollX : "100%"来强制dataTables保持列宽：

..
 sScrollX: "100%", //<-- here
 aoColumns : [
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
       "sWidth": "100px",
    ],
...

你可以玩这个小提琴 -> http://jsfiddle.net/vuAEx/

【讨论】：

【参考方案7】：

我建议不要对 sWidth 使用像素，而是使用百分比。如下：

   "aoColumnDefs": [
   "sWidth": "20%", "aTargets": [ 0 ] , <- start from zero
   "sWidth": "5%", "aTargets": [ 1 ] ,
   "sWidth": "10%", "aTargets": [ 2 ] ,
   "sWidth": "5%", "aTargets": [ 3 ] ,
   "sWidth": "40%", "aTargets": [ 4 ] ,
   "sWidth": "5%", "aTargets": [ 5 ] ,
   "sWidth": "15%", "aTargets": [ 6 ] 
],
     aoColumns : [
       "sWidth": "20%",
       "sWidth": "5%",
       "sWidth": "10%",
       "sWidth": "5%",
       "sWidth": "40%",
       "sWidth": "5%",
       "sWidth": "15%"
    ]
);

希望对你有帮助。

【讨论】：

【参考方案8】：

我在 HTML 标记中设置列宽，如下所示：

    <thead>
        <tr>

            <th style='width: 5%;'>ProjectId</th>
            <th style='width: 15%;'>Title</th>
            <th style='width: 40%;'>Abstract</th>
            <th style='width: 20%;'>Keywords</th>
            <th style='width: 10%;'>PaperName</th>
            <th style='width: 10%;'>PaperURL</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        
            <tr id="@item.ID">
                <td>@item.ProjectId</td>
                <td>@item.Title</td>
                <td>@item.Abstract</td>
                <td>@item.Keywords</td>
                <td>@item.PaperName</td>
                <td>@item.PaperURL</td>
            </tr>
        
    </tbody>
</table>

【讨论】：

【参考方案9】：

我尝试了很多方法。对我有用的唯一方法是：

Yush0 CSS 解决方案：

#yourTable
    table-layout: fixed !important;
    word-wrap:break-word;

与 Roy Jackson HTML 解决方案一起：

    <th style='width: 5%;'>ProjectId</th>
    <th style='width: 15%;'>Title</th>
    <th style='width: 40%;'>Abstract</th>
    <th style='width: 20%;'>Keywords</th>
    <th style='width: 10%;'>PaperName</th>
    <th style='width: 10%;'>PaperURL</th>
</tr>

【讨论】：

【参考方案10】：

对于 1.9.4 仍有问题的用户 改变

//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);

【讨论】：

【参考方案11】：

如果您只需要使用 CSS 设置数据表列的宽度，以下 css 将帮助您:-)

HTML

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
    <thead>
    <tr role="row" class="heading">
        <th >
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                <input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
                <span></span>
            </label>
        </th>
        <th > Col 1 </th>
        <th > Col 2 </th>
        <th > Col 3 </th>
        <th > Actions </th>
    </tr>
    <tr role="row" class="filter">
        <td> </td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
        <td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
        <td>
            <div class="margin-bottom-5">
                <button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
            </div>
            <button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
        </td>
    </tr>
    </thead>
    <tbody> </tbody> 
</table>

使用 metronic 管理主题，我的表 ID 是 #datatable，如上。

CSS

#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3)  width: 120px; min-width: 120px;

【讨论】：

以上是关于数据表 - 设置列宽的主要内容，如果未能解决你的问题，请参考以下文章

如何设置数据表的列宽

DataTable 怎样设置列宽？ DataTable中已经有数据了怎样在现实的时候设置它的列宽？

如何将列宽设置为 jQuery 数据表？

Oracle设置列宽，行数

设置 p:dataTable p:列宽

Java 设置Excel自适应行高列宽