Question

我有以下表格，其中包含超过10列。我正在使用数据表来显示数据。我使用滚动水平，因为我有很多列。但滚动没有出现。请帮忙。这是我的表格的截图

<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>

    <th><center>Outlet ID</center></th>
    <th><center>Outlet Name</center></th>
    <th><center>Date</center></th>
    <th><center>Day</center></th>
    <th><center>Day Part</center></th>
    <th><center>Service</center></th>
    <th><center>Product</center></th>
    <th><center>Staff</center></th>
    <th><center>Pest</center></th>
    <th><center>Others</center></th>
    <th><center>Attentiveness</center></th>
    <th><center>Accuracy</center></th>
    <th><center>Speed</center></th>
    <th><center>Friendliness</center></th>
    <th><center>Food Handling & Hygiene</center></th>
    <th><center>Attentiveness</center></th>
    <th><center>Accuracy</center></th>
    <th><center>Speed</center></th>
    <th><center>Food</center></th>
    <th><center>Manpower</center></th>
    <th><center>Faulty Equipment</center></th>
    <th><center>Staff Behavior</center></th>
    <th><center>Restaurant Cleanliness</center></th>
    <th colspan=3><center>Action</center></th>
    </tr>
    </thead>
    <tbody>


     #code continue...

    </tbody>
    </table>

这是我用于滚动的CSS和脚本

<style>
div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}
</style>


<script>
$(document).ready(function() {
$('#example').DataTable( {
    "scrollY": 300,
    "scrollX": true
} );
} );
</script>

我需要显示水平滚动，因为我有超过10列。请帮忙。结果应显示like this

Answer 1

制作网格responsible并删除with CSS样式。

也可以指定列宽[[width : "10%" or width:"100px"]

<table id="example" class="display nowrap" cellspacing="0" width="100%">

<table id="example" class="display nowrap" cellspacing="0">

共享我的代码示例

CSHTML

<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h4>Customers</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-striped table-hover" id="tblCustomers">
                    <thead>
                        <tr>
                            <th>CustomerId</th>     
                            <th>CustomerName</th>                          
                            <th>#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

JS文件

   $('#tblCustomers').dataTable({
            "scrollX": true,        
            // other Options
            "columns": [
                { "data": "CustomerId", "title": "Customer Id", "width": "30px", "bSortable": false },
                { "data": "CustomerName", "title": "Name", "width": "250px", "bSortable": false }
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return "<a data-customerid='" + row.CustomerId+ "' class='btn btn-primary customer-detail' href='#'>Detail</a>"
                    },
                    "targets": [2],
                    "class": "text-center",
                    "width": '70px'
                }
            ]
        });
    }

Answer 2

您只需在课程表中添加table-responsive。

Answer 3

检查出来

改变这个：

</tbody>
</tables>

到此

</tbody>
</table>

fiddle

Answer 4

$(document).ready(function() { 
    $('#example').DataTable( {
        "scrollY": 300,
        "scrollX": true,
        "responsive": false

    } );
} );

datatable scrollX水平不起作用

4 个答案: