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

Question

表css我需要什么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>

Answer 2

假设桌子下方的背景为白色，那么你可以尝试这样的事情

table, table tr, table td {
  border : 1px solid white;
}

如果这不起作用，请发一个jsfiddle ..

Answer 3

您只需要设置padding以确定单元格周围的间距，并为background-color设置td。

DEMO