1

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>
GRU119
  • 1,028
  • 1
  • 14
  • 31

0 Answers0