zoukankan      html  css  js  c++  java
  • 【JavaScript】table显示问题

    table有时显示出问题,解决办法如下:

    添加<thead></thead>和<tbody></tbody>
    在table的外面添加<div>标签
    例如
    <div class="page-content detail-page" style="margin-top:35px;">
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@include file="/comm/taglib.jsp" %>
    <navigation:header title="中标成交确认书管理" backTitleArray="" backUrlArray=""></navigation:header>
    <div class="page-content detail-page" style="margin-top:35px;">
        <div class="group-accordion" collapsible="false" active="true">
            <h3>
                <label>中标项目详细信息</label>
            </h3>
    
            <table style="border:0px">
                <tr>
                    <td align="left">招标项目名称:&nbsp;</td>
                    <td><input type="text" id="projectName" name="projectName" value="${list.projectName}"/></td>
                </tr>
    
                <tr>
                    <td align="left">中标公司名称:&nbsp;</td>
                    <td><input type="text" id="winner" name="winner" value="${list.winner}"/></td>
                </tr>
    
                <tr>
                    <td align="left">开标时间:&nbsp;&nbsp;</td>
                    <td><input type="text" id="checkTime" name="checkTime" value="${list.checkTime}"/></td>
                </tr>
    
                <tr>
                    <td align="left">开标起始时间:&nbsp;</td>
                    <td><input type="text" id="beginTime" name="beginTime" value="${list.beginTime}"/></td>
                </tr>
    
                <tr>
                    <td align="left">开标截止时间:&nbsp;</td>
                    <td><input type="text" id="endTime" name="endTime" value="${list.endTime}"/></td>
                </tr>
            </table>
    
        </div>
        <div class="group-accordion" collapsible="false" active="true">
            <h3>
                <label>中标产品清单</label>
            </h3>
    
            <div>
                <table id="TSC10002_grid" showAddBtn="true" class="tree dataTable no-footer" width="100%">
                    <thead>
                    <tr style="background:#DBDBDB">
                        <td align="left" width="40px" colspan="21">
                            神农客实业(上海)有限公司××年××月××日××期××半旬招标,你单位为中标单位之一,中标信息如下,请予确认。
                        </td>
                    </tr>
                    <tr style="background:#DBDBDB">
                        <td align="center" width="40px" colspan="21">
                            中标产品清单
                        </td>
                    </tr>
                    <tr style="background:#DBDBDB">
                        <td align="center" width="40px" rowspan="3">序号</td>
                        <td align="center" width="40px" rowspan="3">一级分类</td>
                        <td align="center" width="40px" rowspan="3">二级分类</td>
                        <td align="center" width="40px" colspan="6">产品信息</td>
                        <td align="center" width="40px" rowspan="3">OEM品牌及产品等级</td>
                        <td align="center" width="40px" rowspan="3">产品质量标准</td>
                        <td align="center" width="40px" colspan="2">加工信息</td>
                        <td align="center" width="40px" colspan="7">货值</td>
                        <td align="center" width="40px" rowspan="3">备注</td>
    
                    </tr>
                    <tr style="background:#DBDBDB">
                        <td align="center" width="40px" colspan="3">品种名</td>
                        <td align="center" width="40px" rowspan="2">产品特征</td>
                        <td align="center" width="40px" rowspan="2">净重(kg/箱)</td>
                        <td align="center" width="40px" rowspan="2">包装规格</td>
                        <td align="center" width="40px" rowspan="2">数量(吨)</td>
                        <td align="center" width="40px" rowspan="2">箱数</td>
                        <td align="center" width="40px" colspan="5">中标价(元/kg)</td>
                        <td align="center" width="40px" rowspan="2">本次结算标准价(元/kg)</td>
                        <td align="center" width="40px" rowspan="2">货值(元)</td>
                    </tr>
                    <tr style="background:#DBDBDB">
                        <td align="center" width="40px">标准市场销售名</td>
                        <td align="center" width="40px">学名</td>
                        <td align="center" width="40px">俗名</td>
                        <td align="center" width="40px">不含包装离岸价</td>
                        <td align="center" width="40px">包装成本</td>
                        <td align="center" width="40px">含包装离岸价</td>
                        <td align="center" width="40px">干线运费</td>
                        <td align="center" width="40px">到岸价</td>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${lists}" var="list" varStatus="i">
                        <tr>
                            <td>${i.index+1}</td>
                            <td>${list.yjfl}</td>
                            <td>${list.ejfl}</td>
                            <td>${list.xsm}</td>
                            <td>${list.xm}</td>
                            <td></td>
                            <td>${list.tz}</td>
                            <td>${list.jz}</td>
                            <td>${list.gg}</td>
                            <td>${list.dj}</td>
                            <td>${list.zlbz}
                            </td>
                            <td>${list.sl}</td>
                            <td>${list.xs}</td>
                            <td>${list.bhlaj}</td>
                            <td>${list.cb}</td>
                            <td>${list.laj}</td>
                            <td>${list.yf}</td>
                            <td>${list.daj}</td>
                            <td>${list.bzj}</td>
                            <td>${list.hz}</td>
                            <td></td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            以上表格内容经双方确认,同意签字盖章并扫描回复。
            <br/>
            <table width="100%">
                <tr>
                    <td width="50%">
                        发标方:神农客实业(上海)有限公司
                        (签字、盖章)
                        <br/>
                        <br/>
                        <img src="${ctx}/static/core/images/action/tuzhang2.png"/>
                        <br/>
                        <br/>
                        <br/>
                        日期:2016.6.24
                    </td>
                    <td>
                        中标方:河北创融公司
                        (签字、盖章)
                        <br/>
                        <br/>
                        <img src="${ctx}/static/core/images/action/tuzhang1.png"/>
                        <br/>
                        <br/>
                        <br/>
                        日期:2016.6.24
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script src="${ctx}/js/ds/TSC10002.js"></script>



  • 相关阅读:
    P1007 独木桥
    P1789 【Mc生存】插火把
    P2658 汽车拉力比赛
    1959 拔河比赛
    P1936 水晶灯火灵
    websocket
    瀑布流布局
    Router
    图片占位
    单位
  • 原文地址:https://www.cnblogs.com/dflmg/p/5619568.html
Copyright © 2011-2022 走看看