I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the data. Is there a way to make the row data wrap when the table reaches the container length?
Here is an image showing the problem: https://i.sstatic.net/Bo1dO.jpg
You can find a portion of my view along with the CSS and example here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model)
{
<tr>
<td>@Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { @class = "modal-link" })</td>
<td>
@user.AlternateId
</td>
<td>@user.Email</td>
<td>
@if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="@foreach (var gameName in user.Assigned){<div>@gameName</div>}">
@user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
@if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="@foreach (var gameName in user.Unassigned) {<div>@gameName</div>}">
@user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>