修改tr标签的行距,tbale标签的td标签间距

  1. 看如下Css文件的代码,其都没有table的tr行距产生效果
tr{
margin-top: 10px;
padding: 10px;
}
td{
margin-left: 2px;
}

这个设置其实,会没有效果的,原因就是对于table来说,它有一个属性值会设置是否当成一个整体来看,且其有设置table元素间距行距的属性。

  1. border-collapse 属性设置表格的边框是否被合并为一个单一的边框
属性值 作用描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果设置的话,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 从父元素继承 border-collapse 属性的值,大多数为collapse
  1. border-collapse属性加上border-spacing属性就可以设置tr标签行间距,和td标签的间距
<table style="border-collapse:separate; border-spacing:0px 10px;">
<tr>
<td>不等风雨,只等你</td>
<td>汝,知否?</td>
</tr>
<tr>
<td>春风十里不如你</td>
<td>汝,知否?</td>
</tr>
<tr>
<td>漂洋过海来看你</td>
<td>汝,知否?</td>
</tr>
</table>

border-spacing:2px 5px;第一个参数代表td的间距,第二个参数代表tr的行距。

table标签修改tr,td标签的行距的更多相关文章

  1. jQuery获取table表中的td标签

    首先我来介绍一下我遇到的问题 1.当有一个table表包含了<tr>标签,<td>标签,大致可以认为是这样的: <tr> <td> @scene.ID ...

  2. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  3. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  4. JS从后台获取数据,前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

  5. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  6. 对<tr><td>标签里的input 循环取值

    需求描述:单击table整行,跳转到具体的信息页面  关键就是获取整行的id,传给后台做查询,返回list 解决思路:用带参数函数传过去id,然后在js的函数中用$("#id"). ...

  7. zf-关于<ww:iterator /> 标签中的<td /> 标签添加序号问题

    一开始代码是这样的 那个<ww:if> 标签 是我添加的,可是添加之后出问题了. 因为我加了一个判断语句,使得不需要的信息没显示出来,导致#li.count 这个显示下标的方法行不通了 之 ...

  8. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  9. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

随机推荐

  1. Linux虚拟内存的作用

    要深入了解linux内存运行机制,需要知道下面提到的几个方面:首先,Linux系统会不时的进行页面交换操作,以保持尽可能多的空闲物理内存,即使并没有什么事情需要内存,Linux也会交换出暂时不用的内存 ...

  2. Robotics Education and Research at Scale - A Remotely Accessible Robotics Development Platform

    张宁  Robotics Education and Research at Scale - A Remotely Accessible Robotics Development Platform链接 ...

  3. SpringBoot 使用AOP记录接口访问日志

    文章来源:https://macrozheng.github.io/mall-learning/#/technology/aop_log AOP AOP为Aspect Oriented Program ...

  4. 实现RTSP摄像机硬盘录像机NVR网站网页微信H5直播方案EasyNVR部署问题之:ERR_CONTENT_LENGTH_MISMATCH

    背景分析 接触到EasyNVR产品的开发者都知道,EasyNVR是一套功能齐全.简洁易用的流媒体解决方案,可作为能力曾前端接入摄像头,后端接入业务系统使用,也可以作为应用层,直接修改为属于企业用户自己 ...

  5. [LeetCode] 163. Missing Ranges 缺失区间

    Given a sorted integer array nums, where the range of elements are in the inclusive range [lower, up ...

  6. [LeetCode] 202. Happy Number 快乐数

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  7. 【VS开发】MFC动态设置对话框属性 弹出或嵌入

    参考: MFC的对话框CDialog是怎么控制窗口可调整大小的属性的呢?打开资源文件,对话框资源的属性列表中,有一个"Border"项,改变该项的值就可以改变窗口边框风格.实际上w ...

  8. Centos7挂载新硬盘

    1.查看系统是否检测到新的硬盘设备 ls /dev/ |grep sd linux 中所有外设都会在这个目录下,对应一个文件,其中第一块硬盘是sda,第二块硬盘是sdb,第三块硬盘是sdc.其中sda ...

  9. 使用qmlscene命令来快速查看编辑的qml文件的实际效果图

    一片金灿灿的树叶落下来,仿佛飞来了许许多多翩翩起舞的黄蝴蝶. Qt SDK 提供 了 一个 命令行 环境, 给那些 有 特殊 需求 的 开发者, 方便 他们 在 不 使用 Qt Creator 集成 ...

  10. Charles手机代理设置

      Charles工具 手机 方法/步骤     1.打开Charles   点击Proxy,选择proxy settings,输入端口8888   打开电脑,在cmd中输入ipconfig,查看本地 ...