列宽在数据表中不起作用 bootstrap

Question

我正在使用以下代码设置数据的列宽Table。在部分页面加载期间，宽度似乎是正确的，而当它完全加载时，宽度会关闭。

<script>
    $(document).ready(function () {
        $("#memberGrid").dataTable({
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "../../Content/swf/copy_csv_xls.swf"
            },
            "destroy": true,
            "info": true,
            "bLengthChange": false,
            "bFilter": false,
            "bAutoWidth": false,
            "aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
        });
    });
</script>

Table 标记

<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
                <thead class="tablehead">
                    <tr>
                        <th style="width: 20%">Name</th>
                        <th style="width: 20%">Room with</th>
                        <th style="width: 20%">Extensions</th>
                        <th style="width: 10%">Travel Protection</th>
                        <th style="width: 20%">Flying from</th>
                        <th style="width: 10%">Balance</th>
                    </tr>
                </thead>
                <tbody>
            <tr class="tablerows">
                <td style="width: 20%"><%# Eval("Travelers") %></td>
                <td style="width: 20%"><%# Eval("RoomMates")%></td>
                <td style="width: 20%"><%# Eval("Extensions")%></td>
                <td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td>
                <td style="width: 20%"><%# Eval("Airport")%></td>
                <td style="width: 10%">$<%# Eval("Balance")%></td>
            </tr>
            </tbody>
                    </table>

Answer 1

很高兴看到您的 table 发挥作用，但我强烈认为这纯粹是内容宽度的问题。带有 display: table-cell 的元素将尝试展开，以便在不换行的情况下尽可能多地显示其内容。例如，具有标题 "Travel Protection" 的 <th> 的宽度定义为 10% - 您需要相当宽的 table 才能在 10% 内显示 "Travel Protection" .

因此否决 <th> 的默认 word-wrap 和 word-break 设置，如下所示：

table.dataTable thead tr th {
    word-wrap: break-word;
    word-break: break-all;
}

一种演示（如前所述，无法向您的 table IRL 证明这一点）-> http://jsfiddle.net/9vbz7thp/

最好的办法是调整 <th> 的内容，使其适合硬编码的宽度。

如果是 <td> 的内容变得太大（通常是 loooong not breakable word）：

table.dataTable tbody tr td {
    word-wrap: break-word;
    word-break: break-all;
}

顺便说一句：您不需要在 <th> 和 <td> 中都定义硬编码宽度。 <td>的宽度自动从对应的<th>中获取。

Answer 2

定义数据表属性时使用以下脚本：

"columns": [
        { "width": "25px" },
        { "width": "25px" },
        { "width": "450px" },
        { "width": "20px" },
        { "width": "20px" },
        { "width": "20px" },
        { "width": "20px" },
        { "width": "20px" }
],

Answer 3

对于自动调整，明确添加此

var MyDatatable = $("#memberGrid").dataTable();


MyDatatable.columns.adjust().draw();

Answer 4

设置列宽时，还需要设置：

autoWidth: false

...在 DataTable 本身上

Answer 5

 oTableDetails = $('#tblUserDetails').dataTable({

   "autoWidth":false,

为我工作

Answer 6

var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
  var tableHeaderWidth = 0;
  $("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
    var cols = 1;
    if(parseInt($(this).attr("colspan")) > 1) {
      cols = parseInt($(this).attr("colspan"));
    }
    tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
  });
  $("body").find("div").css("width","auto");
  $("body").find("table").css("width","auto");
  $("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
  $("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
  $("body").find("th,td").each(function(){
    if($(this).attr("data-col-width") > 0){
      $(this).css("width",$(this).attr("data-col-width") +"px");
    }
  });
},50);
}
$( window ).resize(function() {
   if (reCalculateLayoutDatatableYN == true) {
     reCalculateLayoutDatatable();
   }
});
$( document ).ready(function() {
    reCalculateLayoutDatatable();
});

HTML:

<table id="datatableLarge" class="table">
  <thead>
    <tr class="row-header" >
       <th data-col-width="100">管理番号</th>
       <th data-col-width="350">物件名</th>
       <th data-col-width="40">号室</th>
       <th data-col-width="100" >
          管理区分
       </th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td data-col-width="100">1234</td>
       <td data-col-width="350">物件1</td>
       <td data-col-width="40">号室1</td>
       <td data-col-width="100" >
          管理区分
       </td>
  </tbody>

Answer 7

我实际上不得不采取相反的方法并删除 autoWidth 行（与 autoWidth:true 相同）并记住将所需的宽度放在与我的数据相同的对象中：

"columns": [{ 'data': 'account.organization_Name', width: '120px' }]

如此处所示：http://live.datatables.net/jatazeho/1/edit

Answer 8

唯一对我有用的是在 header 列上设置内联 min-width:

    <table width="100%">
        <tr>
            <thead>
                <th>Ref</th>
                <th style="min-width: 100px">User</th>
                <th>Organisation</th>
            </thead>     
        </tr>
        ...
    </table>

Answer 9

可能是列数的问题，如果列数太多，好像就不行了。尝试确定 table 的大小，例如：

style="宽度: 9000px"

通过此更改，我的列宽问题消失了

                <table id="tbl-PriceDiscrepancy" class="table table-condensed table-hover" style="width: 9000px">
                <thead class="btn-dark">
                    <tr>
                        <th colspan="8" style="text-align: center; background-color: indianred; padding-top: 4px">VIM</th>
                        <th colspan="19" style="text-align: center; background-color: darkslategrey; padding-top: 4px">MIRO</th>
                        <th colspan="12" style="text-align: center; background-color: cornflowerblue; padding-top: 4px">PURCHASING DOCUMENTS</th>
                        <th colspan="5" style="text-align: center; background-color: darkslateblue; padding-top: 4px">MIGO</th>
                    </tr>
                    <tr>
                        <th scope="col">Dp.Vim</th>
                        <th scope="col">Vim.Doc.Type</th>
                        <th scope="col">Completed</th>
                        <th scope="col">Curent.Agent</th>
                        <th scope="col">Multi.Agent</th>
                        <th scope="col">Current.Role</th>
                        <th scope="col">Vim.Block.Status</th>
                        <th scope="col">Vim.Block.Reason</th>

                        <th scope="col">Subsequent.Debit.Credit</th>
                        <th scope="col">Blocked.Due.Price</th>
                        <th scope="col">Payment.Block.Code</th>
                        <th scope="col">Miro.Doc.Num</th>
                        <th scope="col">Plant</th>
                        <th scope="col">Company.Code</th>
                        <th scope="col">Fiscal.Year</th>
                        <th scope="col">Document.Date</th>
                        <th scope="col">Posting.Date</th>
                        <th scope="col">Reference/NF</th>
                        <th scope="col">NF.Type</th>
                        <th scope="col">Vendor.Code</th>
                        <th scope="col">Vendor.Name</th>
                        <th scope="col">Miro.Total.Amount</th>
                        <th scope="col">Miro.Item.Amount</th>
                        <th scope="col">Tax.Amout</th>
                        <th scope="col">Currency</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Base.Unit</th>

                        <th scope="col">Contract.Number</th>
                        <th scope="col">Contract.Item.Number</th>
                        <th scope="col">Contract.Value</th>
                        <th scope="col">Contract.New.Value</th>
                        <th scope="col">Condition.Pricing.Unit</th>
                        <th scope="col">Purchasing.Document.Type</th>
                        <th scope="col">Purchasing.Document.Number</th>
                        <th scope="col">Purchasing.Document.Item</th>
                        <th scope="col">MatNr</th>
                        <th scope="col">Description</th>
                        <th scope="col">PO.Gross.Price</th>
                        <th scope="col">Purchase.Unit.Price</th>

                        <th scope="col">Migo.Document</th>
                        <th scope="col">Migo.Year</th>
                        <th scope="col">Migo.Amount</th>
                        <th scope="col">Migo.Quantity</th>
                        <th scope="col">Migo.Base.Unit</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>


    $('#tbl-PriceDiscrepancy').DataTable({
    "aaSorting": [[0, "desc"]],
    "lengthChange": true,
    "filter": true,
    "ordering": true,
    "info": true,
    "paging": true,
    lengthMenu: [5, 10, 15, 20, 25, 50, 100, 200],
    "iDisplayLength": _displayLenght,
    columnDefs: [{
        targets: 0,
        width: "200px"
    }, {
        targets: 1,
        width: "200px",
    }, {
        targets: 2,
        width: "500px",
        className: "centerCol"
    }]
});

Answer 10

Set the first column's width to 20% with columnDefs:
$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );
Set the first column's width to 20% with columns
$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );`enter code here`

列宽在数据表中不起作用 bootstrap

Column width not working in DataTables bootstrap

datatables

width

twitter-bootstrap