CSS控制表格tr之间的边距

tr之间距离可以通过设置 tr 的外边距（margin）来实现，但是注意必须先把tr的显示属性设置为块体（block）元素：

tr{display:block;margin:2px 0;
}

创建HTML元素示例如下：

<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>

添加CSS样式

table{border-collapse: collapse;
}td{width:90px;padding:5px;border:1px solid green;
}tr{display:block; /*将tr设置为块体元素*/margin:2px 0;  /*设置tr间距为2px*/
}

显示效果

文章转载于：learneroner 链接：https://zhidao.baidu.com/question/86746837.html

CSS控制表格tr之间的边距相关推荐

html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签用<tabl ...
CSS控制表格的方法
现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...
CSS控制表格——制作日历
表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版.这一次我们就来学习如何用CSS控制表格.一.表格中的标记表格(<table>标记)在最初HTML设计时,仅仅是用来存放各种数据 ...
css控制边界与边框示例(内边距、外边距使用方法)
这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 p ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
html中隔行的代码,js+css 控制表格隔行变色与单行高亮的代码
代码片段: 1,css代码复制代码代码示例: table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px; ...
CSS设置表格tr行间距的方法
border-collapse:separate; border-spacing: 0px 10px; 参考链接:https://blog.csdn.net/caicai1171523597/arti ...
用CSS控制表格的框格线
在postContent类里的<table>将自动实现. .postContent{border-collapse:collapse;border:none;} .postContent ...
html表格怎么取消自动换行,css怎么控制表格不要自动换行？
很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋.下面我们就来看一下css控制表格不自动换行的方法. 我们可以通过为表格添加white-space:nowrap ...

CSS控制表格tr之间的边距

CSS控制表格tr之间的边距相关推荐

最新文章

热门文章