Html – Set Table cellspacing color

csshtmlhtml-table

I have a table overlays on top an image as its background image.

I want to set the cellspacing color to white so that the columns looks separated.

However I could not o set the <table> background color because it affects the <td> background color too in which I want it to stay transparent.

Each of the <td> has its own border color as well, hence I could not tweak with its border color to white. 

<div id="container">
  <img id="mybackgroundimage" />
  <table id="table">
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td class="red"></td>
    </tr>
    <tr>
      <td class="red"></td>
      <td class="green"></td>
      <td class="red"></td>
    </tr>
 </table>
</div>




        #container{
            position: relative;
        }

        #table {
            border-spacing: 2px;
            position: absolute;
            top: 0;
        }

           #table td.green {
               border-color: green;
           }

           #table td.red {
               border-color: red;
           }

Anyone could advise?

Best Answer

Option 1: use solid outline for cells.

#table {
  border-spacing: 2px;
  position: absolute;
  top: 0;
}

#table td {
  outline: 2px solid #ccc;
}

#table td.green {
  border: 1px solid green;
}

#table td.red {
  border: 1px solid red;
}
<table id="table">
  <tr>
    <td class="green">Cell one</td>
    <td>Cell two</td>
  </tr>
  <tr>
    <td>Cell three</td>
    <td class="red">Cell four</td>
  </tr>
</table>

Option 2: use box shadow with zero blur radius.

#table {
  border-spacing: 2px;
  position: absolute;
  top: 0;
}

#table td {
  box-shadow: 0 0 0 2px #ccc;
}

#table td.green {
  border: 1px solid green;
}

#table td.red {
  border: 1px solid red;
}
<table id="table">
  <tr>
    <td class="green">Cell one</td>
    <td>Cell two</td>
  </tr>
  <tr>
    <td>Cell three</td>
    <td class="red">Cell four</td>
  </tr>
</table>

Related Topic