CODEWITHSUNDEEP
htmlcss
SerOsDeveloper
SerOsDeveloper

Reputation: 255

Color the space between cells in table

How can I color the space between the cells in the table in different colors? I made a picture of how the result should be: enter image description here

I tried it with this code:

 body {
  padding: 50px;
  text-align: center;
  font-size: 15pt;
}

table td{
  margin: 5px;
}

tr.BorderBottom td{
  border-bottom: 2px solid black;
}

.Orange{
  background-color: orange;  
  }
.Green{
  background-color: green;
}
.LeftGreen{
  background: linear-gradient(to right, green 50%, orange 50%);
  }
.RightGreen{
  background: linear-gradient(to right, orange 50%, green 50%);
  }
<table>
  <tr class="BorderBottom">
    <td>
    <div class="RightGreen">One</div>
    </td>
    <td>
    <div class="Green">Two</div>
    </td>
    <td>
    <div class="Green">Three</div>
    </td>
    <td>
      <div class="LeftGreen">Four</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="LeftGreen">Five</div>
    </td>
    <td>
      <div class="Orange">Six</div>
    </td>
    <td>
      <div class="Orange">Seven</div>
    </td>
    <td>
      <div class="RightGreen">Eight</div>
    </td>
  </tr>
  
</table>

enter image description here

but as you can see, I don't know how to color the space between the cells. And the black border between the two rows is not continuous.

Upvotes: 1

Views: 963

Answers (1)

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10444

Add cellspacing="0" cellpadding="0" to your html, so all the spaces will be resetted. Then re-add the space between cells with plain padding, e.g. in the div element:

body {
  padding: 50px;
  text-align: center;
  font-size: 15pt;
}

table td{
  border-collapse: collapse;
}

table tr > td > div {
  padding: 5px;
}

tr.BorderBottom td{
  border-bottom: 2px solid black;
}

.Orange{
  background-color: orange;  
  }
.Green{
  background-color: green;
}
.LeftGreen{
  background: linear-gradient(to right, green 50%, orange 50%);
  }
.RightGreen{
  background: linear-gradient(to right, orange 50%, green 50%);
  }
<table cellspacing="0" cellpadding="0">
  <tr class="BorderBottom">
    <td>
    <div class="RightGreen">One</div>
    </td>
    <td>
    <div class="Green">Two</div>
    </td>
    <td>
    <div class="Green">Three</div>
    </td>
    <td>
      <div class="LeftGreen">Four</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="LeftGreen">Five</div>
    </td>
    <td>
      <div class="Orange">Six</div>
    </td>
    <td>
      <div class="Orange">Seven</div>
    </td>
    <td>
      <div class="RightGreen">Eight</div>
    </td>
  </tr>
  
</table>

Upvotes: 1

Related Questions