响应式引导表答案

【问题标题】：Responsive bootstrap table响应式引导表
【发布时间】：2019-06-28 08:48:10
【问题描述】：

我有一个不适合页面的表格，他们是一种调整表格大小甚至重新格式化表格的方法，以便条目可以在另一个下方继续，因为将条目分成两行？或任何其他我可以将所有数据显示在表格内的解决方案。

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

我想要它，以便表格适合页面。

【问题讨论】：

这个问题本质上就是为什么现在网格系统比表格更受欢迎。表格不容易做出响应。对于一个简单的开箱即用解决方案，我建议您查看Bootstrap grid system
@Liam 抱歉，那是意外
嗨@Conor8630，您的问题与ASP NET MVC 无关，因此我建议您将标题更改为“引导表不适合”之类的内容，以避免人们对您的问题投反对票。谢谢
@TiagoBrenck 感谢您的提醒
@Conor8630 你试过我的答案了吗？

标签： html asp.net-mvc html-table responsive-design

【解决方案1】：

只需将您的表放在带有引导程序table-responsive 的div 类中，如下所示：

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

【讨论】：

【解决方案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;
  }
}

希望对你有帮助

【讨论】：