How To Design A Table With Transparent Borders And Spacing With Background

what css values do I need for table css in order to look like this: I've wasted over 12 hours trying to figure it out. I wouldn't ask a stupid question like this if I wasn't givin

Solution 1:

You will need to use the help of border-collapse property.

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>

Solution 2:

assuming the background below the table is white then you may try something like this

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

If this does not work then please post a jsfiddle..

Solution 3:

You just need to set paddingfor spacing around cells and background-color for your table td.

DEMO