Отзывчивый загрузочный стол

Question

У меня есть таблица, которая не помещается на странице. Является ли это способом изменить размер таблицы или даже переформатировать ее так, чтобы записи продолжались друг под другом, как разделить запись на две строки?Или любое другое решение, в котором все данные отображаются внутри таблицы.

<table class="table table-bordered table-sm">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    EmployeeNo.
                </th>
                <th>
                    HoursTaken
                </th>
                <th>
                    Site
                </th>
                <th>
                    Shift
                </th>
                <th>
                    AL Start Date
                </th>
                <th>
                    AL Finish Date
                </th>
                <th>
                    Hours Requested
                </th>
                <th>
                    Comments
                </th>
                <th>
                    Year of Holiday
                </th>

                <th>
                    Status
                </th>

                <th>
                    Submitted by
                </th>

                <th>
                    Approved by
                </th>

                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Employee.FullName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Employee.EmployeeID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Employee.HoursTaken)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Employee.Site.SiteName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Employee.Shift.Shift1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StartDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.FinishDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.HoursTaken)
                    </td>
                    <td>
                        @Html.DisplayWithBreaksFor(modelItem => item.Comments)

                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.YearOfHoliday)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.Approved)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.SubmittedBy)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.ApprovedBy)
                    </td>

                    <td>
                        @Html.ActionLink("Approve/Reject", "Edit", new { id = item.RequestID }, new { @class = "btn-xs btn-success glyphicon glyphicon-thumbs-up" })<b> ᛫</b>
                        @Html.ActionLink("Details", "Details", new { id = item.RequestID }, new { @class = "btn-xs btn-info glyphicon glyphicon-info-sign" })<b> ᛫</b>
                        @Html.ActionLink("Delete", "Delete", new { id = item.RequestID }, new { @class = "btn-xs btn-danger glyphicon glyphicon-trash" })

                    </td>
                </tr>
            }

        </table>

Мне бы хотелось, чтобы таблица соответствовала странице.

Answer 1

Просто поместите ваш стол в класс div с начальной загрузкой table-responsive следующим образом:

<div class="table-responsive">
   <table class="table table-bordered table-sm">
      // table rows and columns
   </table>
</div>

Answer 2

Здесь вы можете найти возможное решение по CodePen.io

HTML

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

Я надеюсь, что это поможет вам