html – CSS:表格边框水平分隔并垂直折叠

前端之家收集整理的这篇文章主要介绍了html – CSS:表格边框水平分隔并垂直折叠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法应用于表格单元格的单独和折叠边框属性折叠但分开?谢谢

编辑:这是想要的结果:

解决方法

不,边界坍塌不允许单独定义水平和垂直.你可以通过额外的标记来实现它(在桌面上,最终可能会有很多额外的标记),所以我不建议它,但我会给它代码

HTML

<table>
   <tr>
     <th><div>Header 1</div></th>
     <th><div>Header 2</div></th>
   </tr>
   <tr>
     <td><div>Content 1</div></td>
     <td><div>Content 2</div></td>
   </tr>
   <tr>
     <td><div>Content 3</div></td>
     <td><div>Content 4</div></td>
   </tr>
</table>

和css:

table {border-collapse: collapse;}
th,td { border: 0; padding: 0;}
th div,td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}

当然,您可能希望在div或子选择器上使用类,如果您可能在表数据中有其他div,则某种方式仅针对div.边距控制你的水平间隙,当然,你的填充或边框宽度可以是你想要的任何东西.

猜你在找的HTML相关文章