I've created a code snippet to generate a dynamic table:
<table class="table table-hover">
<thead>
<tr>
<th class="col-xs-3">Friendly Name</th>
<th class="col-xs-3">Unique Tracker URL</th>
<th class="col-xs-3">URL Endpoint</th>
<th class="col-xs-1">Bitly Link</th>
<th class="col-xs-1">Info and Settings</th>
<th class="col-xs-1">Danger Zone</th>
</tr>
</thead>
<tbody id="linksBody">
<tr id="links">
<td>(<a onclick="edit(this)">Edit</a>) <?php echo $row['friendly']; ?></td>
<td>(<a onclick="editEnd(this)">Customize</a>) <a href="<?php echo $row['name']; ?>"><?php echo $row['name']; ?></a></td>
<td><a href="<?php echo $row['endpoint']; ?>"><?php echo $row['endpoint']; ?></a></td>
<td><a href="<?php echo $row['bitly']; ?>"><?php echo $row['bitly']; ?></a></td>
<td><a onclick="showDetails(this);">Show</a>/<a onclick="settings(this);">Settings</a></td>
<td><a onclick="del(this);">Delete</a>/<a onclick="reset(this);">Reset</a></td>
</tr>
</tbody>
</table>
While the table looks good up to a width of 1275px:
https://i.sstatic.net/ZGgc5.png
It starts to break when the screen size is reduced below that threshold:
https://i.sstatic.net/HGgoQ.gif
What are some ways I can make my table responsive for smaller screens?