列宽在DataTables引导程序中不起作用

Question

我使用以下代码来设置DataTable的列宽.在部分页面加载期间,宽度看起来是正确的,当它完全加载时,宽度关闭.

<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 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

设置列宽时,还需要设置:

autoWidth: false

...在DataTable本身

Answer 2

很高兴看到你的桌子在行动,但我有一种强烈的感觉,这是一个内容宽度的纯粹问题.元素display: table-cell将尝试扩展,以显示尽可能多的内容而不包装.例如,<th>具有标题为"旅行保护"的标题的宽度,您定义为10% - 您需要一个相当宽的表格来显示10%的"旅行保护".

所以否决了默认word-wrap和word-break设置,<th>如下所示:

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

一种演示(如上所述,无法向您的表格IRL证明这一点) - > http://jsfiddle.net/9vbz7thp/

最好的方法是调整<th>s 的内容,使它们适合硬编码的宽度.

如果它的内容<td>变得太大(通常是一个不易破解的词):

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

BTW:你并不需要在这两个定义硬编码的宽度<th>和<td>的.<td>自动从相应的宽度获得宽度<th>.

Answer 3

唯一对我有用的min-width是在列标题上设置内联：

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

Answer 4

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

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

Answer 5

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

   "autoWidth":false,

正在为我工​​作