Basic set up of responsive tables
Basic set up of responsive tables
davebell.nz
Posts: 1Questions: 1Answers: 0
Hi all,
I'm relatively new to web design and am currently trying to replicate the responsive datatable shown in this page:
https://datatables.net/extensions/responsive/examples/initialisation/className.html
I've simply cut and paste the code from the js, css and html tabs provided and successfully run this on my Chrome and Firefox desktop browsers (Windows OS).
My issue occurs when I view this example on my android device (Sony Xperia C, Chrome and Firefox browsers) and the Toggle Device Mode available on my Chrome desktop browser. When I view my example, 8 columns are visible and only the last column is hidden. The width/text in these 8 columns has been reduced to fit the small screen width and is too small to read unless zoomed in.
When I view the original example hosted on the datatables page via the same mobile settings, it is displaying correctly - with 2 columns visible & readable, with the remaining 7 nicely hidden away.
I'm hoping someone who is more familiar with datatables will be able to provide some assistance so I can get this running correctly on a mobile device.
Thank you for your help and please let me know if you need more information.
Dave
I have included a copy of my code belowm with script edited as 'script1' to display on this forum:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
</head>
<body>
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
</tbody>
</table>
<script1 type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script1>
<script1 type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script1>
<script1 type="text/javascript" src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script1>
<script1>
$(document).ready(function() {
$('#example').DataTable();
});
</script1>
</body>
</html>