Question

[#assign page = cmsfn.page(component)!]
[#if page?has_content]
   [@cms.component content=cmsfn.asContentMap(component) editable=false/]
   ... Do something with `page`, otherwise we need not use #assign.
[#else]
   ... Don't do anything with `page`, it's that strange default object.
[/#if]

table
{
  background-color: lime;
  border-collapse: collapse;
}

tr 
{ 
  border-width: 0 0 1px 0;
  border-style: solid;
}
tr:last-child 
{
  border: none; // so the last child from thead and tbody dont have border
}

现在，我希望行之间有透明边框，但只需要tbody中的行，但不要在thead和tbody之间。首先，我试过

<table>
      <thead>
        <th>Rank</th>
        <th>Player</th>
        <th>Pts</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>player1</td>
        <td>50</td>
      </tr>
      <tr>
        <td>2</td>
        <td>player2</td>
        <td>40</td>
      </tr>
      <tr>
        <td>3</td>
        <td>player3</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>player4</td>
        <td>40</td>
      </tr>
  </tbody>       
</table>

在这种情况下，我得到了我想要的元素边框，但它是黑色而不透明。然后我试着使用border-spacing：

table {
  border-collapse: collapse;

  tr { 
      border-width: 0 0 1px 0;
      border-style: solid;
  }
  tr:last-child {
      border: none; // so the last child from thead and tbody dont have border
  }
}

现在我有透明的边框，但是在thead之前和之后也有边框，这是我无法消除的。所以，我现在要么： 1.边框仅在tbody中但不在thead和第一个数据行之间（好），但边框不透明（坏）要么 2.透明边框（好），但是thead和第一个数据行之间不需要的边框（坏）。

有没有办法合并这个，所以我有透明的边框，但不是在thead和第一个数据行之间？

修改我希望边框完全透明，但只要我用rgba（0,0,0,0）设置边框颜色，边框就会“消失”。好吧，它并没有真正消失，但是从td中获取背景颜色（浅灰色，这也是一个rgba值），我不知道为什么。

Answer 1

使用border-color: rgba(0,0,0,.5);

<!DOCTYPE html>
<html>
<head>
<style> 
table
{
background:yellow;
border-spacing: 0;
}
 
tbody tr:not(:last-of-type) td
{ 
      border-width: 0 0 5px 0;
      border-style: solid;
      border-color:black;      
      border-color: rgba(0,0,0,.5);
      
}
</style>
</head>
<body>

<table>
  <thead>
    <th>Rank</th>
    <th>Player</th>
    <th>Pts</th>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>player1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>2</td>
    <td>player2</td>
    <td>40</td>
  </tr>
  <tr>
    <td>3</td>
    <td>player3</td>
    <td>30</td>
  </tr>
  <tr>
    <td>4</td>
    <td>player4</td>
    <td>40</td>
  </tr>


</body>
</html>

Answer 2

编辑：

实现此目的的一种方法是在:after的{{1}}上使用tr，以便您可以＆＃34;模拟＆＃34;边界。

thead

有了这个，你可以放置＆＃34; border＆＃34;位于thead { background: lime; tr:after { background: lime; content: ""; height: 2px; position: absolute; left: 56px; top: 77px; width: calc(100% - 111px); } }和thead之间的空格顶部。显然，这可能不是最佳解决方案，但我无法找到另一种方式。

示例：https://jsfiddle.net/qapmqfau/6/

Answer 3

问题是你的桌子有背景颜色。如果你使边框完全透明，它是透明的，但它不会告诉你桌面背后的内容。您正在查看表格的背景颜色。另外，既然您使用的是桌子，那么您是否只是使用边框间距？

但我想，边框颜色的rgba(0,0,0,0)也可以正常工作。

＆＃13;

table
{
  border-spacing: 0 20px;
}

tr 
{ 
  background-color: lime;
}
tr:last-child 
{
  border: none; // so the last child from thead and tbody dont have border
}

＆＃13;

<table>
      <thead>
        <th>Rank</th>
        <th>Player</th>
        <th>Pts</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>player1</td>
        <td>50</td>
      </tr>
      <tr>
        <td>2</td>
        <td>player2</td>
        <td>40</td>
      </tr>
      <tr>
        <td>3</td>
        <td>player3</td>
        <td>30</td>
      </tr>
      <tr>
        <td>4</td>
        <td>player4</td>
        <td>40</td>
      </tr>
  </tbody>       
</table>

＆＃13;

Answer 4

在每行

之后添加一个空表行

<!DOCTYPE html>
<html>
<head>
<style> 
table 
{

border-spacing: 0;
border-collapse:collaspe; 
}
 th
 {
  background:pink;
 }
 
tr:nth-child(even) 
{
 background:transparent; 
 height:2px;
}

tr:nth-child(odd)
{
 background:green;  
}

</style>
</head>
<body>

<table>
  <thead>
    <th>Rank</th>
    <th>Player</th>
    <th>Pts</th>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>player1</td>
    <td>50</td>
  </tr>
  <tr></tr>
  <tr>
    <td>2</td>
    <td>player2</td>
    <td>40</td>
  </tr>
  <tr></tr>
  <tr>
    <td>3</td>
    <td>player3</td>
    <td>30</td>
  </tr>
  <tr></tr>
  <tr>
    <td>4</td>
    <td>player4</td>
    <td>40</td>
  </tr>
  


</body>
</html>

仅在tbody上有透明边框的表

4 个答案: