Assume we have this code with high number of columns ( similar to my project sceanrio ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CRUD Table</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<style>
.crud-btn {
padding: 5px 10px;
margin: 2px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
}
.crud-btn.delete {
background-color: #f44336;
}
.crud-btn.update {
background-color: #008CBA;
}
</style>
</head>
<body>
<div class="table-container">
<table id="example" class="display responsive nowrap" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
<th>Column 21</th>
<th>Column 22</th>
<th>Column 23</th>
<th>Column 24</th>
<th>Column 25</th>
<th>Column 26</th>
<th>Column 27</th>
<th>Column 28</th>
<th>Column 29</th>
<th>Column 30</th>
<th>Column 31</th>
<th>Column 32</th>
<th>Column 33</th>
<th>Column 34</th>
<th>Column 35</th>
<th>Column 36</th>
<th>Column 37</th>
<th>Column 38</th>
<th>Column 39</th>
<th>Column 40</th>
<th>Column 41</th>
<th>Column 42</th>
<th>Column 43</th>
<th>Column 44</th>
<th>Column 45</th>
<th>Column 46</th>
<th>Column 47</th>
<th>Column 48</th>
<th>Column 49</th>
<th>Column 50</th>
<th>Column 51</th>
<th>Column 52</th>
<th>Column 53</th>
<th>Column 54</th>
<th>Column 55</th>
<th>Column 56</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
<td>Data 30</td>
<td>Data 31</td>
<td>Data 32</td>
<td>Data 33</td>
<td>Data 34</td>
<td>Data 35</td>
<td>Data 36</td>
<td>Data 37</td>
<td>Data 38</td>
<td>Data 39</td>
<td>Data 40</td>
<td>Data 41</td>
<td>Data 42</td>
<td>Data 43</td>
<td>Data 44</td>
<td>Data 45</td>
<td>Data 46</td>
<td>Data 47</td>
<td>Data 48</td>
<td>Data 49</td>
<td>Data 50</td>
<td>Data 51</td>
<td>Data 52</td>
<td>Data 53</td>
<td>Data 54</td>
<td>Data 55</td>
<td>Data 56</td>
<td>
<button class="crud-btn update">Update</button>
<button class="crud-btn delete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable({
responsive: true
});
});
</script>
</body>
</html>
Columns exceeding screen limits are displayed are lining up ( displayed in line ).
I prefer to scroll horizentally.
Is there any solutions ( like a javascript table library ) that solves such issue.