I have a large table that is many columns across. I cannot get the table to fit on the screen. I have found many similar questions, but none of the solutions work. How do I consolidate the table to fit on the screen? I'm using bootstrap 4. It seems to be a relatively easy fix, but can't seem to fit the table to screen correctly. I've tried the below solutions:
Did not work:
table {
max-width: none;}
Did not work:
<td style ="word-break:break-all;">
Did not work:
.table td.fit,
.table th.fit {
white-space: nowrap;
width: 1%;
}
Solution 1 Solution 2 Solution 3
<div class="row">
<div class="col-lg-12">
<div class="card">
<table class="table table-striped table-condensed">
<thead class="bg-primary white">
<tr>
<th>
@Html.DisplayNameFor(model => model.UnitID)
</th>
<th>
@Html.DisplayNameFor(model => model.UnitCode)
</th>
<th>
@Html.DisplayNameFor(model => model.UnitName)
</th>
<th>
@Html.DisplayNameFor(model => model.GroupName)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.UnitID)
</td>
<td>
@Html.DisplayFor(modelItem => item.UnitCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.UnitName)
</td>
<td>
@Html.DisplayFor(modelItem => item.GroupName)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>