HTML table行距的改变方法示例
2020-08-18 04:09
786 查看
在使用HTML表的时候有时候需要我们改变行距,但是改变margin,padding,collapse等方法效果都不是很好。在这里我找到了一个实用的小技巧。利用display属性+margin来实现。
例子:
tr{margin-top:0px;padding:0px;display:block;}
我们来看一下对比
tr{margin-top:-10px;padding:0px;display:block;}
可以很明显的看到行距缩短了不少。
其他解决方法
问题提出:
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐);
并且在tr中对起设定padding是有用的,可以增加内边距,但是设定margin是没有用的,tr的外间距依然是0;
解决方案:
css的两个属性:border-collapse:collapse / separate & border-spacing:10px 10px;
需要用border-collapse & border-spacing联合控制tr的间距;
如:
<table style="border-collapse:separate; border-spacing:10px;"> <tr></tr> </table>
到此这篇关于HTML table行距的改变方法示例的文章就介绍到这了,更多相关HTML table行距内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- JavaScript简单实现动态改变HTML内容的方法示例
- Extjs4中使用grid的reconfigure()方法动态改变列使用示例(代码)
- JAVA读取WORD,EXCEL,PDF,TXT,RTF,HTML文件文本内容的方法示例
- Lua中访问table里函数的方法示例
- insertAdjacentHTML方法示例
- 实现div垂直居中的display:table-cell方法示例介绍
- 改变HTML下拉框SELECT选项的多种方法
- 重写resize方法,监听html标签大小的改变
- insertAdjacentHTML方法示例
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- JS实现改变HTML上文字颜色和内容的方法
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
- IE6-IE9不支持table.innerHTML的解决方法--终极解决办法
- 用Python生成HTML表格的方法示例
- JAVA过滤标签实现将html内容转换为文本的方法示例
- JAVA读取WORD,EXCEL,PDF,TXT,RTF,HTML文件文本内容的方法示例
- 使用原生JS来改变HTML文档的几种方法
- JAVA读取WORD,EXCEL,PDF,TXT,RTF,HTML文件文本内容的方法示例
- javascript打印html内容功能的方法示例
- Hbase操作table常见方法示例