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;
  }
}

我希望它可以帮助您

响应式引导表

2 个答案: