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

jjhzyzn0  于 2023-04-01  发布在  其他
关注(0)|答案(5)|浏览(163)

有没有什么方法可以应用到一个表格单元格的分离和折叠的边界属性已经折叠,但分离?谢谢

EDIT:这是想要的结果:

xesrikrc

xesrikrc1#

也许吧

table {
  border-spacing: 1px 0;
}
krcsximq

krcsximq2#

我能得到的最接近的是:

table {
    border-collapse: separate;
    border-spacing: 4px 0;
}
table td, table th {
    border: 1px solid black;
}

不幸的是,这将在行之间创建一条双粗线。border-spacing属性中不允许负值,否则-1px可能会工作。
如果可以接受的话,你可以把其他的线条做成2px宽,这样至少你不会有不同的边框厚度:

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;
}
qco9c6ql

qco9c6ql3#

不,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,那么某种方式只针对divmargin控制你的水平间距,当然,你的paddingborder宽度可以是你想要的任何宽度。

mum43rcc

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

qvk1mo1f

qvk1mo1f5#

这就是你要找的吗?

table {
    border: 1px solid black;
}

table td {
    border: 1px solid red;
    margin: 3px;  
}

它不使用border-collapse属性,但它创建了一个外部表边框,每个<td>都在自己的单独边框中。

相关问题