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>

    艾豆社区、豆信框架、豆信开发手册
  • 相关阅读:
    (十五)、常见的几种RuntimeException
    (十四)、泛型中extends和super的区别
    (十三)、Java泛型
    (十二)、构造方法、静态属性和静态方法的使用要点
    (十一)、final,finally,finalize的区别
    (十)、java内部类与内部类的闭包和回调
    (九)、线程sleep和wait的区别
    (八)、java中==和equals和hashCode的区别
    sketch中做outline icon的制作技巧
    sketch Measure的安装及使用
  • 原文地址:https://www.cnblogs.com/zhoumeng780/p/4664880.html
Copyright © 2011-2022 走看看