html - 如何设计具有透明边框和背景间距的表格

Question

为了使表格看起来像这样，我需要什么 css 值:

我已经浪费了 12 多个小时试图弄明白。 如果我不放弃的话，我不会问这样一个愚蠢的问题。

Answer 1

您将需要使用 border-collapse 属性的帮助。

body
{
  background: #345;
}
table
{
  border-collapse: separate;
  border-spacing: 5px;
  border: 0;
  margin: 1em;
}
td
{
  font-size: 1em;
  padding: 5px;
}



tr:nth-child(odd) td
{
    background: #fff;
    color: #000;
}
tr:nth-child(even) td
{
    background: #000;
    color: #fff;
}

<table>
    <tr>
        <td>Lorem</td>
        <td>Lorem</td>
        <td>Lorem</td>
    </tr>    
    <tr>
        <td>Lorem</td>
        <td>Lorem</td>
        <td>Lorem</td>
    </tr>    
    <tr>
        <td>Lorem</td>
        <td>Lorem</td>
        <td>Lorem</td>
    </tr>    
    <tr>
        <td>Lorem</td>
        <td>Lorem</td>
        <td>Lorem</td>
    </tr>    
</table>