Sorry if my question sounds stupid. I am still new to front end development.
I have build two table which would be shown if tab button is clicked. However, I have problem when i set up a datatable columns are out in range of browser window, as you can see in the picture below
<div >
<div >
<div >
</div>
<div >
<div >
<div >
<!-- Nav tabs -->
<ul role="tablist">
<li >
<a data-toggle="tab" href="#profile1" role="tab">PatientProfile</a>
<div ></div>
</li>
<li >
<a data-toggle="tab" href="#profile2" role="tab">Treatment Record</a>
<div ></div>
</li>
</ul>
<!-- Tab panes -->
<div style="height: calc(100% - (100px)) !important; width: calc(100vw - (40px)) !important;">
<div id="profile" role="tabpanel" >
<p >
<div >
<table id="dom-jqry" style="width:100%;">
<tr>
<th style="width:50px;">Date</th>
<th style="width:50px;">Dr.</th>
<th style="width:50px;">Trx Fee (RM)</th>
<th style="width:100%;">Treatment Description</th>
</tr>
<tr id="119">
<td>2022-05-27</td>
<td>Dr. Shepherd</td>
<td><input type="text" style="width:50px;" value="150" disabled></input></td>
<td style="height:300px;"><textarea style="height:300px;width:100%;" disabled>Scaling and polishing </textarea></td>
</tr>
</table>
</div>
</p>
</div>
<div id="profile2" role="tabpanel">
<p >
<div >
<table id="dom-jqry" style="width:100%;">
<tr>
<th style="width:50px;">Date</th>
<th style="width:50px;">Dr.</th>
<th style="width:50px;">Trx Fee (RM)</th>
<th style="width:100%;">Treatment Description</th>
</tr>
<tr id="119">
<td>2022-05-27</td>
<td>Dr. Medaline</td>
<td><input type="text" style="width:50px;" value="150" disabled></input></td>
<td style="height:300px;"><textarea style="height:300px;width:100%;" disabled>Scaling and polishing </textarea></td>
</tr>
</table>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Could anyone let me know how to rectify this? I would like it to be responsive and with ScrollBarX when using mobile web browser.
CodePudding user response：
please correct me if i will be wrong, before that please add this javascript code( if you are using Datatable library).
var dataTable = $('#dom-jqry').DataTable({
scrollY: "320px",
scrollX: true,
scrollCollapse: true,
paging: true,
pageLength: 50,
"dom": 'Blfrtip',
columnDefs: [{
className: 'noVis',
}
],
"buttons": [{
extend: 'colvis',
columns: ':not(.noVis)'
}],
"processing": true,
"ajax": {
url: "",
//"type" : "POST",
"dataSrc": "",
"data": "",
error: function(response) {
alert(JSON.stringify(response));
}
},
"columns": [{
"data": "test"
}],
"pagingType": "full_numbers",
});<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/autofill/2.4.0/css/autoFill.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
<div >
<div >
<div ></div>
<div >
<div >
<div >
<!-- Nav tabs -->
<ul role="tablist">
<li ><a data-toggle="tab" href="#profile1" role="tab">PatientProfile</a>
<div ></div>
</li>
<li ><a data-toggle="tab" href="#profile2" role="tab">Treatment Record</a>
<div ></div>
</li>
</ul>
<!-- Tab panes -->
<div style="height: calc(100% - ( 100px)) !important; width: calc(100vw - ( 40px)) !important;">
<div id="profile" role="tabpanel">
<div >
<table id="dom-jqry" style="width: 100%;">
<thead>
<tr>
<th>Date</th>
<th>Dr.</th>
<th>Trx Fee (RM)</th>
<th>Treatment Description</th>
</tr>
</thead>
<tbody>
<tr id="119">
<td>2022-05-27</td>
<td>Dr. Shepherd</td>
<td><input type="text" value="150" disabled></td>
<td><textarea disabled>Scaling and polishing </textarea></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="profile2" role="tabpanel">
<p >
<div >
<table id="dom-jqry1" style="width: 100%;">
<tr>
<th style="width: 50px;">Date</th>
<th style="width: 50px;">Dr.</th>
<th style="width: 50px;">Trx Fee (RM)</th>
<th style="width: 100%;">Treatment Description</th>
</tr>
<tr id="119">
<td>2022-05-27</td>
<td>Dr. Medaline</td>
<td><input type="text" style="width: 50px;" value="150" disabled></input>
</td>
<td style="height: 300px;"><textarea style="height: 300px; width: 100%;" disabled>Scaling and polishing </textarea></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/autofill/2.4.0/js/dataTables.autoFill.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>you can hereby modify as per your requirement.
CodePudding user response：
Simply you can add a responsive option inside your DataTables options with a boolean value.
$('#dom-jqry').DataTable( {
responsive: true
} );