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

简介: 实现多个table表格在jsp页面中分多列进行展示
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>


相关文章
|
1月前
|
Java 应用服务中间件 开发工具
如何使用IDEA创建JSP页面
如何使用IDEA创建JSP页面
72 0
|
3月前
|
Java 数据安全/隐私保护
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
该博客文章通过JavaBean组件和JSP动作元素`<jsp:forward>`与`<jsp:param>`的使用示例,演示了用户登录流程,包括登录信息的提交、验证以及根据验证结果进行的页面跳转。
JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。
|
6月前
|
自然语言处理 Java 数据库连接
掌握JSP页面编程:动态生成Web内容
【4月更文挑战第3天】Java Server Pages (JSP) 是一种用于创建动态Web内容的Java技术,它结合HTML并允许在页面中嵌入Java代码。JSP支持代码片段、表达式语言(EL)和JSTL标签库,简化动态内容生成。当服务器接收到请求时,执行JSP中的Java代码并将结果嵌入HTML返回给客户端。示例展示了如何显示当前日期和时间。JSP可与Servlet、JavaBeans、数据库等结合,用于构建功能丰富的交互式Web应用。
132 5
掌握JSP页面编程:动态生成Web内容
|
6月前
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
银行营业网点管理系统——修改的页面(updateBreaches.jsp)
|
6月前
新闻发布项目——注册页面(reg.jsp)
新闻发布项目——注册页面(reg.jsp)
|
6月前
|
Java 数据库连接 mybatis
springboot访问jsp页面变成直接下载?
springboot访问jsp页面变成直接下载?
|
6月前
|
前端开发 Java
java实现动态验证码源代码——jsp页面
java实现动态验证码源代码——jsp页面
|
6月前
|
JavaScript 前端开发 Java
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
|
6月前
|
存储 缓存 Java
JSP页面生命周期详解及优化建议
JSP页面生命周期详解及优化建议
114 0
|
6月前
|
前端开发 Java
java通过commons-fileupload实现多张图片的上传(jsp页面)
java通过commons-fileupload实现多张图片的上传(jsp页面)