美文网首页
实现多个table表格在jsp页面中分多列进行展示

实现多个table表格在jsp页面中分多列进行展示

作者: GuangHui | 来源:发表于2016-12-14 15:59 被阅读994次
    1.这里演示的分两列展示的效果:

    注意:红色边框是我画出来用于提示是table区域的.

    效果截图
    2.关键jsp代码:
    
    <div class="panel-body">
        <c:forEach items="${itemList}" varStatus="status" begin="0" end="${itemList.size() }" step="1">
            <div style="float: left;width: 45%;margin:15px;height: 190px;border-bottom:1px dashed #6292BE">
            <!-- 通过设置 div的悬浮float:left,使div不致于分行显示;
                 通过设置 width:45%,来确保显示两列,你可以设置小一点,来让其显示多列;
                 通过设置 margin:15px,来设置各个div之间的间距;
                 通过设置 hight:190px,来设置每个div的高度不因为内容项目的多少而显示高度不一致.
                 通过设置border-bottom:1px dashed #6292BE",使div下边缘显示为虚线.
             -->
                <table class="table-detail" cellpadding="0" cellspacing="0" border="0" type="main" width="100%" style="table-layout: fixed;border: none;">  
                    <tr height="40">
                        <td style="text-align: left;color:#6292BE;font-size:16px;border-width: 0;width: 70%"><c:out value="${itemList[status.index].name}" escapeXml="true"></c:out></td>
                        <td style="text-align: right; border-width: 0;width: 30%">
                            <a href="${ctx}/smart/itemTopic/itemTopic/showMoreNewsList.ht?id=${itemList[status.index].id}" style="text-decoration:none;text-align:center;color:#3D8E4A;">MORE >>></a>
                        </td>
                    </tr>
                    <c:forEach items="${itemList[status.index].newsList}" var="itemNews" varStatus="status">
                         <tr height="30">
                             <td style="text-align: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; border-width: 0;">
                                <a href="${ctx}/smart/itemTopic/itemTopic/newsShow.ht?id=${itemNews.id}&returnUrl=${returnUrl}" style="text-decoration:none;text-align:center;color:#000000;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><c:out value="${itemNews.title}" escapeXml="true"/></a>
                             </td>
                             <td style="text-align: right; border-width: 0;width: 30%"><fmt:formatDate value="${itemNews.publishTime}" pattern="yyyy-MM-dd"/></td>
                         </tr>
                     </c:forEach>
                </table>
            </div>
        </c:forEach>
    </div>
    

    相关文章

      网友评论

          本文标题:实现多个table表格在jsp页面中分多列进行展示

          本文链接:https://www.haomeiwen.com/subject/mfwimttx.html