请问css样式如何设置table表格之间的间隔。像这样:

请问css样式如何设置table表格之间的间隔。像这样:,第1张

<table>

<tr><td style="border:1px solid blackwidth:50pxheight:10px"></td></tr>

<tr><td style="border:1px solid blackwidth:50pxheight:10px"></td></tr>

</table>

table 不加外框(不用border)

td或th中使用style,如果要调节宽度,可以修改width中的值。

如果想要调节行与行之间的宽度,可以在行之间加入一个空行<tr><td></td></tr>

想要调多宽就加多少个。

<tr><td style="border:1px solid blackwidth:50pxheight:10px"></td></tr>

<tr><td></td></tr>

<tr><td style="border:1px solid blackwidth:50pxheight:10px"></td></tr>

首先,在使用之前,我们需要借助一个空列,在这一列我们命名为 标记列

请点击输入图片描述

在接着的后面输入1,3,然后选择两个单元格,当单元格下方出现黑色的 + 符号时,按住鼠标下拉,出现如图数字

请点击输入图片描述

请点击输入图片描述

在有数据的末尾,输入2,4,同上一步的方法补齐对应的数字,就是比上一步多末尾一个数字就可以了,如下

请点击输入图片描述

选择整个工作表或者有数据区域,点击属性栏 排序 —— 自定义排序

请点击输入图片描述

在自定义排序页面,在主要关键词下拉箭头选择 标记列

请点击输入图片描述

这样就会发现已经在原有的基础上隔行插入了多行,选中标记列,删除

请点击输入图片描述

选中表格中的标记列,点击鼠标右键删除,或者键盘delete键删除,完成效果图如下

请点击输入图片描述

以前在做页面显示列表时候,要做一组数据隔行变色,当时不知道,竟然用来了好多js脚本判断,写了许多像下面的例子。Html代码<table><%int c =0%>//循环取列表<%if (c % 2 == 0){className = "一种颜色"} else{className = "另外一种颜色"}c++%><tr lcass="className"><td></td></tr>//循环结束</table>后来直接用css控制:.Pop_TR{background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色")cursor:hand}这样,想展示上面的样式,只需要这样写:Html代码<table>//循环取列表<tr lcass="Pop_TR"><td></td></tr>//循环结束</table>css版只适用于低版本的IE,expression会死人的,如果页面很复杂。还不如前面的切换2个class的简单方法可靠。在高级浏览器中可以考虑使用css selector(流行的js库基本都实现了一套):tr:nth-child(2n+1) /* 奇数行 */tr:nth-child(odd) /* 奇数行 */tr:nth-child(2n+0) /* 偶数行 */tr:nth-child(even) /* 偶数行 */Jquery版:JQuery的话也很简单1.通过定义俩个class来实现$("tr:even").addClass("even-row")$("tr:odd").addClass("odd-row")2.或者一行代码$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})table控制:做个table奇偶行区别显示的css类就好了,这东西不复杂的<tbody><s:iterator id="ip" status="status" value="ipUseList"><tr class="<s:property value="#status.odd?'odd':'even'"/>"><td><s:property value="#ip.subnet"/></td><td><s:property value="#ip.netmask"/></td><td><s:property value="#ip.city_name"/></td>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7996440.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存