I'm currently working with Bootstrap CSS to create a fixed-length table where the contents inside each cell (td) can wrap into multiple lines if necessary.
Below is a snippet of my code that's not functioning as intended. The content within the td cells is not wrapping inside cells of the specified fixed length.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<div class="table-responsive">
<table class="table fixed">
<thead>
<tr>
<th class="col-xs-3">Firstname</th>
<th class="col-xs-3">Lastname</th>
<th class="col-xs-3">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">Johdddddddddddd...</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bebbbcba94b1acb5b9a4...">[email protected]</a></td>
</tr>
<tr>
<td class="col-xs-3">Mary</td>
<td class="col-xs-3">Moe</td>
<td class="col-xs-3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad7dbc8c3fadfc2dbd7...">[email protected]</a></td>
</tr>
<tr>
<td class="col-xs-3">July</td>
<td class="col-xs-3">Dooley</td>
<td ><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49e81988db4918c9599849891d...">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>
</div>The output, shown in the image linkedhttps://i.sstatic.net/comGP.png, displays the overflowing content within the cell.