table超过30个字段如何处理呢？ bootstrap
样式：
@media (max-width: 768px) {
.table-supplier {
width: 100%;
height: 100%;
margin-bottom: 12.75px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
-webkit-overflow-scrolling: touch;
}
.table-supplier > .table {
margin-bottom: 0;
}
.table-supplier > .table > thead > tr > th,
.table-supplier > .table > tbody > tr > th,
.table-supplier > .table > tfoot > tr > th,
.table-supplier > .table > thead > tr > td,
.table-supplier > .table > tbody > tr > td,
.table-supplier > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-supplier > .table-bordered {
border: 0;
}
.table-supplier > .table-bordered > thead > tr > th:first-child,
.table-supplier > .table-bordered > tbody > tr > th:first-child,
.table-supplier > .table-bordered > tfoot > tr > th:first-child,
.table-supplier > .table-bordered > thead > tr > td:first-child,
.table-supplier > .table-bordered > tbody > tr > td:first-child,
.table-supplier > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-supplier > .table-bordered > thead > tr > th:last-child,
.table-supplier > .table-bordered > tbody > tr > th:last-child,
.table-supplier > .table-bordered > tfoot > tr > th:last-child,
.table-supplier > .table-bordered > thead > tr > td:last-child,
.table-supplier > .table-bordered > tbody > tr > td:last-child,
.table-supplier > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-supplier > .table-bordered > tbody > tr:last-child > th,
.table-supplier > .table-bordered > tfoot > tr:last-child > th,
.table-supplier > .table-bordered > tbody > tr:last-child > td,
.table-supplier > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
/*开始*/
@media (min-width: 980px) {
.table-supplier {
width: 100%;
height: 100%;
margin-bottom: 12.75px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
-webkit-overflow-scrolling: touch;
}
.table-supplier > .table {
margin-bottom: 0;
}
.table-supplier > .table > thead > tr > th,
.table-supplier > .table > tbody > tr > th,
.table-supplier > .table > tfoot > tr > th,
.table-supplier > .table > thead > tr > td,
.table-supplier > .table > tbody > tr > td,
.table-supplier > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-supplier > .table-bordered {
border: 0;
}
.table-supplier > .table-bordered > thead > tr > th:first-child,
.table-supplier > .table-bordered > tbody > tr > th:first-child,
.table-supplier > .table-bordered > tfoot > tr > th:first-child,
.table-supplier > .table-bordered > thead > tr > td:first-child,
.table-supplier > .table-bordered > tbody > tr > td:first-child,
.table-supplier > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-supplier > .table-bordered > thead > tr > th:last-child,
.table-supplier > .table-bordered > tbody > tr > th:last-child,
.table-supplier > .table-bordered > tfoot > tr > th:last-child,
.table-supplier > .table-bordered > thead > tr > td:last-child,
.table-supplier > .table-bordered > tbody > tr > td:last-child,
.table-supplier > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-supplier > .table-bordered > tbody > tr:last-child > th,
.table-supplier > .table-bordered > tfoot > tr:last-child > th,
.table-supplier > .table-bordered > tbody > tr:last-child > td,
.table-supplier > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
html:
<div class="table-supplier" style="overflow:auto;">
<table class="table table-condensed" id="J_table_list">
<thead>
<tr>
<th>车辆ID(VIN)</th>
<th>类型数</th>
<th>类型说明</th>
<th>过程结果</th>
<th>设备名称</th>
<th>粗真空</th>
<th>粗真空时间</th>
<th>高真空</th>
<th>高真空时间</th>
<th>真空泄露测试设定值</th>
<th>真空测试名义时间</th>
<th>后真空额定值</th>
<th>后真空额定时间</th>
<th>额定加注压力1</th>
<th>加注压力1额定时间</th>
<th>额定加注压力2</th>
<th>加注压力2额定时间</th>
<th>加注压力泄露测试设定值</th>
<th>加注压力泄露测试时间</th>
<th>加注量设定值</th>
<th>不加空气的回吸设定值</th>
<th>不加空气的回吸时间设定值</th>
<th>加空气的回吸设定值</th>
<th>加空气的回吸时间设定值</th>
<th>压力平衡设定值</th>
<th>压力平衡名义时间</th>
<th>等级</th>
<th>日期</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var m in Model.Radiator_Results)
{
<tr>
<td>@m.VIN</td>
<td>@m.TypeNumber</td>
<td>@m.TypeDescription</td>
<td>@m.ProcessResult</td>
<td>@m.EquipmentName</td>
<td>@m.CoarseVacuum_mbar</td>
<td>@m.CoarseVacuumTime_s</td>
<td>@m.FineVacuum_mbar</td>
<td>@m.FineVacuumTime_s</td>
<td>@m.VacuumLeakTest_mbar</td>
<td>@m.VacuumLeakTestTime_s</td>
<td>@m.PostVacuum_mbar</td>
<td>@m.PostVacuumTime_s</td>
<td>@m.FillingPressure1_mbar</td>
<td>@m.FillingPressure1Time_s</td>
<td>@m.FillingPressure2_mbar</td>
<td>@m.FillingPressure2Time_s</td>
<td>@m.FillingPressureLeakTest_mbar</td>
<td>@m.FillingPressureLeakTestTime_s</td>
<td>@m.FillingVolume_ml</td>
<td>@m.TopOffWithoutVentilate_mbar</td>
<td>@m.TopOffWithoutVentilateTime_s</td>
<td>@m.TopOffVentilate_mbar</td>
<td>@m.TopOffVentilateTime_s</td>
<td>@m.PressureBalance_mbar</td>
<td>@m.PressureBalanceTime_s</td>
<td>@m.Grades</td>
<td>@m.Date</td>
<td>@m.Time</td>
<td>
<a class="edit" href="javascript:;">Edit</a>
<a class="delete" href="javascript:;">Delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
