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>
table超过30个字段如何处理呢? bootstrap的更多相关文章
- 1026. Table Tennis (30)
题目如下: A table tennis club has N tables available to the public. The tables are numbered from 1 to N. ...
- PAT 甲级 1026 Table Tennis (30 分)(坑点很多,逻辑较复杂,做了1天)
1026 Table Tennis (30 分) A table tennis club has N tables available to the public. The tables are ...
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- ecshop运行超过30秒超时的限制解决办法
ecshop运行超过30秒超时的限制解决办法 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-06-04 ecshop运行超过服务器默认的设置30秒的限制时会 ...
- 自动删除超过30天文件的vbs脚本【转发】
利用代码制作自动删除超过30天的文件及文件夹的vbs脚本,定期清理文件夹中长时间无用文件. 1.首先在新建一个文本文档,粘贴代码(代码可通过添加微信公众号vbs_edit(VBS脚本之家)回复018获 ...
- WdatePicker文本框显示当前日期和时间限制<My97DatePicker两个日期范围不超过30天,第一个小于第二个,都不大于当前日期 >
My97DatePicker是很不错的一个日期选择插件,体积只有几十k但是功能非常强大.官网:http://www.my97.net/ 能满足很多苛刻的要求. WdatePicker文本框显示当前日期 ...
- easyui 时间段校验,开始时间小于结束时间,并且时间间隔不能超过30天
//对easyui datetimebox的验证,开始时间要小于结束时间function validateDateTime(beginTimeId,endTimeId,whichTimeId){ co ...
- My97DatePicker选择两个日期范围不超过30天的demo
需求 ExtJs下使用My97DatePicker对时间范围不超过30天进行选择. 关键点 使用全局变量. 对选择完的第一个日期进行逻辑判断.(我的逻辑能力还有待加强啊) 因为当选择了第一个框范围在超 ...
- vue 用户停留页面超过30分钟未操作 强制退出到登录页面
先说下主要实现思路,通过给你的根节点绑定mouseover事件,首先声明下当前时间,每次滑过时记录下滑过的时间,两个时间转化成毫秒数,进行对比,如果超过30分钟,则清除token,跳转到login.h ...
随机推荐
- 读书笔记_Effective_C++_条款二十一:当必须返回对象时,别妄想返回其reference
在栈空间的临时成员变量在函数生命期结束后无法传出 friend A& operator*(const A& a, const A& b) { A temp; temp.data ...
- YUI 之getLocation
关于Y.getLocation的简介是 Returns the `location` object from the window/frame in which this YUI instance o ...
- Google Guava的splitter用法
google的guava库是个很不错的工具库,这次来学习其spliiter的用法,它是一个专门用来 分隔字符串的工具类,其中有四种用法,分别来小结 1 基本用法: String str = " ...
- asp.net 的那点事(2、浏览器和一般处理程序)
从今天开始我们接着来学习:asp.net中一般处理程序和浏览器的通信. 一.第一个图解: 从图解中我们看出,整个过程是:"请求---处理---响应".这个也就是经常面试的时候,面试 ...
- JS全部API笔记
我相信对于程序猿都有做笔记的习惯. 我初学到现在也做了不少笔记,以前,总是怕写的文章或者好的内容分享出来就怕被直接copy以后更个名就不再是你的. 但通过博客园,学习到不少东西,人家都不怕什么了,我自 ...
- LINUX小技巧,如何在指定目录下搜索到含特定关键字的文件。
先找出文件,然后将文件作为输入,找具体关键字 find /etc -name "*" | xargs grep "Hello"
- Codeforces 479E Riding in a Lift
http://codeforces.com/problemset/problem/432/D 题目大意: 给出一栋n层的楼,初始在a层,b层不能去,每次走的距离必须小于当前位置到b的距离,问用电梯来回 ...
- 关于bat文件语法
@echo offecho 当前盘符:%~d0echo 当前盘符和路径:%~dp0echo 当前批处理全路径:%~f0echo 当前盘符和路径的短文件名格式:%~sdp0echo 当前CMD默认目录: ...
- js深入研究之无法理解的js类代码,extend扩展
<script type="text/javascript"> function Person(name) { this.name = name; } Person.p ...
- ZZY的宠物
Description ZZY领养了一对刚刚出生的不知名小宠物..巨萌巨可爱!!...小宠物的生命为5个单位时间并且不会在中间出意外翘辫子(如: 从0出生能活到5但活不到6)..小宠物经过2个单位时间 ...