Columns overflow in responsive Datatable

qb200210

Hi everyone,

I have this problem of column overflow that I think I exhausted all the historical threads but couldn't find a solution. I generated the columns in code and populated the table programmatically. Here are the snapshots showing the problem I'm facing

When dragging the window width to be right before overflow happens:
https://ibb.co/J7rGV6K

This is the overflow that if I just drag the window to be a little bit bigger:
https://ibb.co/Xyr8snq

Code for the table

Javascript code for initializing the table
var tableRef = $('#dataTables-ref').DataTable( {
data: [["","","","","",""]],
columns: [
{ title: "姓名" },
{ title: "名下客户数" },
{ title: "何时加入" },
{ title: "电话" },
{ title: "用户名" },
{ title: "更多" },
],
responsive: true,
"order": [[ 2, "desc" ]],
"pageLength": 50
} );

Could you please share with me your advice? Thanks a lot!

Best,
Bo

qb200210

Not sure how the code for the table dropped from my question. Here it is. Thanks

<div class="panel-body">                        
    <div class="container" style="width:100%">
        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-ref">                                
        </table>
    </div>                            
</div>

colin

Hi @qb200210 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin