有没有什么方法可以应用到一个表格单元格的分离和折叠的边界属性已经折叠,但分离?谢谢
EDIT:这是想要的结果:
xesrikrc1#
也许吧
table { border-spacing: 1px 0; }
krcsximq2#
我能得到的最接近的是:
table { border-collapse: separate; border-spacing: 4px 0; } table td, table th { border: 1px solid black; }
不幸的是,这将在行之间创建一条双粗线。border-spacing属性中不允许负值,否则-1px可能会工作。如果可以接受的话,你可以把其他的线条做成2px宽,这样至少你不会有不同的边框厚度:
border-spacing
-1px
table { border-collapse: separate; border-spacing: 4px 0; } table td, table th { border-width: 1px 2px; border-style: solid; border-color: black; } table tr:first-child th, table tr:first-child td { border-top-width: 2px; } table tr:last-child th, table tr:last-child td { border-bottom-width: 2px; }
qco9c6ql3#
不,border-collapse不允许单独定义水平和垂直。你可以通过额外的标记来实现它(在一个表上,最终可能会有很多额外的标记),所以 * 我不建议这样做,* 但我会给予它的代码:网址:
border-collapse
<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上使用一个类或一个子选择器,如果你在table数据中可能有其他div,那么某种方式只针对div。margin控制你的水平间距,当然,你的padding或border宽度可以是你想要的任何宽度。
div
table
margin
padding
border
mum43rcc4#
这可以在th & td单元格中不使用额外的div元素来实现。此解决方案适用于Chrome,Firefox和IE8+。
中央支助组
table { border-collapse: separate; border-spacing: 10px 0px; } td, th { padding: 10px; border: 1px solid #000; border-top: none; } table tr:first-child th { border-top: 1px solid #000; }
如果表的第一行不包含表头单元格(TH),则将table tr:first-child th更改为table tr:first-child td。在这里查看我的jsfiddle:Table with column spacing but collapsed row border
qvk1mo1f5#
这就是你要找的吗?
table { border: 1px solid black; } table td { border: 1px solid red; margin: 3px; }
它不使用border-collapse属性,但它创建了一个外部表边框,每个<td>都在自己的单独边框中。
<td>
5条答案
按热度按时间xesrikrc1#
也许吧
krcsximq2#
我能得到的最接近的是:
不幸的是,这将在行之间创建一条双粗线。
border-spacing
属性中不允许负值,否则-1px
可能会工作。如果可以接受的话,你可以把其他的线条做成2px宽,这样至少你不会有不同的边框厚度:
qco9c6ql3#
不,
border-collapse
不允许单独定义水平和垂直。你可以通过额外的标记来实现它(在一个表上,最终可能会有很多额外的标记),所以 * 我不建议这样做,* 但我会给予它的代码:网址:
和css:
当然,你可能想在
div
上使用一个类或一个子选择器,如果你在table
数据中可能有其他div,那么某种方式只针对div
。margin
控制你的水平间距,当然,你的padding
或border
宽度可以是你想要的任何宽度。mum43rcc4#
这可以在th & td单元格中不使用额外的div元素来实现。此解决方案适用于Chrome,Firefox和IE8+。
中央支助组
如果表的第一行不包含表头单元格(TH),则将table tr:first-child th更改为table tr:first-child td。
在这里查看我的jsfiddle:Table with column spacing but collapsed row border
qvk1mo1f5#
这就是你要找的吗?
它不使用
border-collapse
属性,但它创建了一个外部表边框,每个<td>
都在自己的单独边框中。