无数据时的Datatable水平滚动条

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <!-- 添加更多列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 数据将在这里插入 -->
    </tbody>
</table>

$(document).ready(function() {
    $('#example').DataTable({
        "scrollX": true, // 启用水平滚动条
        "language": {
            "emptyTable": "No data available" // 自定义空表提示
        }
    });
});

table.dataTable thead th,
table.dataTable tbody td {
    white-space: nowrap;
    width: 150px; /* 根据需要调整宽度 */
}