pekcheng pekcheng - 2 months ago 10
CSS Question

Set Table cellspacing color

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?

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>
      

Comments