jsp 的div表格示例

news2024/10/6 14:33:51
<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jsp div 表格示例 </title>
    </head>
    <body>

        <div style="width: 99%; top: 5px; position:  absolute; margin: 0px; ">
            <div id="vartable" style=" width: 800px; display:  table; margin: 0 auto; border-collapse:  collapse;">


                <%  for(int i=0;i<15;i++){  %>

                <div  id="vtable-row" style="display:  table-row; height: 30px;  border-collapse:  collapse; border-top:  #021e98 solid thin; border-left: #021e98 solid thin;

                      <% //如果是最后一行使用JSP内置对象out输出border-bottom属性,为表格显示底部框线。

                        if(i==14){
                            out.println("border-bottom:  #021e98 solid thin;");
                        }  %>   ">

                    <div style="display:  table-cell; border-right: #021e98 solid thin;  text-align:  center; vertical-align:  middle;">
                        <div> 1</div>
                    </div>

                    <div style="display:  table-cell;  border-right: #021e98 solid thin;  text-align:  center; vertical-align:  middle;">
                        <div> 2</div>
                    </div>

                    <div style="display:  table-cell;  border-right: #021e98 solid thin; text-align:  center; vertical-align:  middle;">
                        <div> 3</div>
                    </div>

                    <div style="display:  table-cell; border-right: #021e98 solid thin; text-align:  center; vertical-align:  middle;">
                        <div> 4</div>
                    </div>

                </div>

                <%  } %>

            </div>
        </div>

    </body>
</html>

 

这有几个问题;

它是用div赋予以下属性来形成表格、表格的行、表格的单元格;

display:  table
display:  table-row;
display:  table-cell;

    这个以前没用过;常常都是display:  block,或者 display: none;


if(i==14){
    out.println("border-bottom:  #021e98 solid thin;");
    }  %>

这几句是写到div元素的标签内部,<div  id="vtable-row" ...>这个div的结束标签的内部,它是这样的,

                        if(i==14){
                            out.println("border-bottom:  #021e98 solid thin;");
                        }  %>   ">

代码没有问题;以前也没见这样写法;

如果移到div标签外部,表格会乱;移到 "> 外面表格会乱;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1187095.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

智能网联汽车有哪些信息安全场景

目录 1.车内安全通信 2.车云安全通信 3.安全启动 4.车载应用程序保护 5.入侵检测防御与日志管理系统 在聊完车载信息安全需求之后&#xff0c;势必要去看看​应用场景有哪些。根据之前的开发经验简单聊一下我知道的&#xff0c;还有很多没有讲&#xff0c;比如说车云之间具…

Spring Data JPA 项目配置与QueryDSL集成

一、说明 Spring Data JPA通过Spring Initializer创建时勾选相关依赖即可引入&#xff0c;QueryDSL需要单独引入。Spring JPA针对QueryDSL有比较好的兼容性&#xff0c;可以实现优雅的SQL构建。 二、设置JPA默认配置&#xff08;yaml格式&#xff09; spring:jpa:hibernate:…

08.Diffusion Model数学原理分析(上)

文章目录 Diffusion Model回顾Diffusion Model算法TrainingInference 图像生成模型的本质目标MLE vs KLVAE计算 P θ ( x ) P_\theta(x) Pθ​(x)Lower bound of log ⁡ P ( x ) \log P(x) logP(x) DDPM计算 P θ ( x ) P_\theta(x) Pθ​(x)Lower bound of log ⁡ P ( x ) \…

Vue el-table序号与复选框hover切换

效果图下&#xff1a; <template><div class"container"><el-tableref"multipleTable"id"multipleTable":data"person.tableData"cell-mouse-enter"cellEnter"cell-mouse-leave"cellLeave"selecti…

Hive3 on Spark3配置

1、软件环境 1.1 大数据组件环境 大数据组件版本Hive3.1.2Sparkspark-3.0.0-bin-hadoop3.2 1.2 操作系统环境 OS版本MacOSMonterey 12.1Linux - CentOS7.6 2、大数据组件搭建 2.1 Hive环境搭建 1&#xff09;Hive on Spark说明 Hive引擎包括&#xff1a;默认 mr、spark、…

【C++】详解 void*

文章目录 1. void *是什么&#xff1f;2. void*详解3. 和void的区别4. 应用场景4.1 函数传参时不确定类型&#xff0c;或者要支持多类型的传参&#xff1b;4.2 当函数的返回值不考虑类型指关心大小的时候 5. 总结 今天看到一段代码&#xff0c;觉得非常有意思。 void* say_hell…

人车实时精准管控!北斗让换流站作业更安全

换流站是高压直流输电系统的核心组成部分&#xff0c;对促进电网稳定运行、保障电力行业的可持续发展有着重要作用。长期以来&#xff0c;随着电网主变改扩建设工程的开展&#xff0c;站内作业人员安全管控压力随之增大&#xff0c;仅依靠传统的“人盯人”和“自主”管控模式较…

【Linux基础IO篇】用户缓冲区、文件系统、以及软硬链接

【Linux基础IO篇】用户缓冲区、文件系统、以及软硬链接 目录 【Linux基础IO篇】用户缓冲区、文件系统、以及软硬链接深入理解用户缓冲区缓冲区刷新问题缓冲区存在的意义 File模拟实现C语言中文件标准库 文件系统认识磁盘对目录的理解 软硬链接软硬链接的删除文件的三个时间 作者…

20 _ 散列表(下):为什么散列表和链表经常会一起使用?

有两种数据结构,散列表和链表,经常会被放在一起使用。 例如,如何用链表来实现LRU缓存淘汰算法,但是链表实现的LRU缓存淘汰算法的时间复杂度是O(n),当时我也提到了,通过散列表可以将这个时间复杂度降低到O(1)。 Redis的有序集合是使用跳表来实现的,跳表可以看作一种改进…

SpringBoot中的Environment

暂且理解成整个application.properties 通过Environment 可以访问application.properties中的任何配置 这里用yml配置 具体实用

CSS 对齐、组合选择符、伪类、伪元素、导航栏

一、CSS 对齐&#xff1a; 1&#xff09;、元素居中对齐&#xff1a; 水平居中对齐一个元素&#xff0c;可以使用margin&#xff1a;auto&#xff0c;设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度&#xff0c;并将两边的空外边距平均分配。示例&#xff1a; …

如何快速教你看自己电脑cpu是几核几线程

目录 一、我们日常中说的电脑多少核多少线程&#xff0c;很多人具体不知道什么意思&#xff0c;下面举例4核和4线程什么意思。二、那么4线程又是怎么回事呢&#xff1f;三、那么知道了上面的介绍后怎么看一台电脑是几核&#xff0c;几线程呢&#xff1f; 一、我们日常中说的电脑…

C语言每日一题(26)移除链表元素

力扣网 203. 移除链表元素 题目描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 思路分析 针对如图的普通情况&#xff0c;不能简单的遍历到对应位置然后进行释放&#xff0c;一方…

Linux内核有什么之内存管理子系统有什么第三回 —— 小内存分配(1)

接前一篇文章&#xff1a;Linux内核有什么之内存管理子系统有什么第二回 —— 单刀直入 本文内容参考&#xff1a; 内存分配不再神秘&#xff1a;深入剖析malloc函数实现原理与机制 系统调用与内存管理&#xff08;sbrk、brk、mmap、munmap&#xff09; 特此致谢&#xff01;…

智安网络|探索人机交互的未来:自然语言处理的前沿技术

自然语言处理是人工智能领域中研究人类语言和计算机之间交互的一门学科。它涉及了语言的理解、生成、翻译、分类和摘要等多个方面。随着人们对自然语言处理的重视和需求不断增长&#xff0c;成为了热门的研究方向。 首先&#xff0c;我们需要了解自然语言处理的基本概念。自然…

Qt实现动态桌面小精灵(含源码)

目录 一、设计思路 二、部分源码演示 三、源码地址 🌈write in front🌈 🧸大家好,我是三雷科技.希望你看完之后,能对你有所帮助,不足请指正!共同学习交流. 🆔本文由三雷科技原创 CSDN首发🐒 如需转载还请通知⚠️ 📝个人主页:三雷科技🧸—CSDN博客 🎁欢…

c语言贪吃蛇项目的实现

ncurse的引入 ncurse的概念 ncurse(new curses)是一套编程库&#xff0c;它提供了一系列的函数&#xff0c;以便使用者调用它们去生成基于文本的用户界面。 ncurses是一个能提供功能键定义(快捷键),屏幕绘制以及基于文本终端的图形互动功能的动态库。ncurses用得最多的地方是…

C++二分算法: 找出第 K 小的数对距离

题目 数对 (a,b) 由整数 a 和 b 组成&#xff0c;其数对距离定义为 a 和 b 的绝对差值。 给你一个整数数组 nums 和一个整数 k &#xff0c;数对由 nums[i] 和 nums[j] 组成且满足 0 < i < j < nums.length 。返回 所有数对距离中 第 k 小的数对距离。 示例 1&#x…

LeetCode-94. 二叉树的中序遍历(C++)

目录捏 一、题目描述二、示例与提示三、思路四、代码 一、题目描述 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 二、示例与提示 示例 1&#xff1a; 输入&#xff1a; root [1,null,2,3] 输出&#xff1a; [1,3,2] 示例 2&#xff1a; 输入&#xf…

引入依赖时,对应类能点击进入,运行时报错

引入依赖时&#xff0c;对应类能点击进入&#xff0c;运行时报错 一、问题二、解决问题的过程三、解决方式1、排除其中一个依赖的公共包2、升级旧依赖 一、问题 我的问题是这样的&#xff1a;以前引入了阿里云文字识别的依赖&#xff0c;最近要调用视频活体检测的接口&#xf…