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

发布时间：2020-12-14 18:47:21 所属栏目：资源来源：网络整理

导读：有没有办法应用于表格单元格的单独和折叠边框属性折叠但分开？谢谢编辑：这是想要的结果：解决方法不,边界坍塌不允许单独定义水平和垂直.你可以通过额外的标记来实现它(在桌面上,最终可能会有很多额外的标记),所以我不建议它,但我会给它代码： HTML： tab

有没有办法应用于表格单元格的单独和折叠边框属性折叠但分开？谢谢

编辑：这是想要的结果：

解决方法

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

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.边距控制你的水平间隙,当然,你的填充或边框宽度可以是你想要的任何东西.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!