zoukankan      html  css  js  c++  java
  • table超过30个字段如何处理呢? bootstrap

    样式:

    @media (max- 768px) {
    .table-supplier {
    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- 980px) {
    .table-supplier {
    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>

    艾豆社区、豆信框架、豆信开发手册
  • 相关阅读:
    网站是HTTP?10分钟变成HTTPS!域名免费添加配置SSL证书,变成https//环境
    纯JS实现在一个字符串b中查找另一个字符串a出现的所有位置,并且不使用字符串的方法(递归)
    网站怎么上传到服务器流程,从本地到服务器上线过程并通过域名(IP地址)进行访问
    html5新特性-header,nav,footer,aside,article,section等各元素的详解
    Django2.2中间件详解
    掌握使用gitlab ci构建Android包的正确方式
    回想让你最有成就感的bug是什么?你是如何发现这个bug的?
    聊聊用Selenium做自动化碰到了哪些坑?都是怎么解决的?
    关于手机淘宝3.25bug我的一些思考与建议
    用docker搭建selenium grid分布式环境实践之路
  • 原文地址:https://www.cnblogs.com/zhoumeng780/p/4664880.html
Copyright © 2011-2022 走看看