Table overlay labels

Question

I'm making a gantt chart-esqe application using a table as a grid for each of the days. When one of the days is allocated the td will be assigned a class which changes its colour to what resource is being used. I'm trying to put a label on top which shows which resource is allocated like the example below.

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100px;
}

td {
  height: 20px;
  width: 20px;
  border: black solid 1px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td class="green">sdfsdfsfsdfs</td>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="green">te</td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td class="red"></td>
      <td class="red"></td>
    </tr>
  </tbody>
</table>

The first two rows which are green work nicely. The label overflowing showing the whole name. I have added a 4th row which does display properly. However the problem comes with the third line. The name is longer than all the days it is allocated so it overflows into the empty tds.

So the only line which doesn't display properly is the 3rd one. The overflow should be hidden so it only display "lon".

Is there any CSS trick which can stop overflowing into an area with a different background/class? Or maybe a javascript solution to prevent overflowing on the last td?

Answer 1

You can use z-index on white cell and assign position static on colored cell to get what you want.

Live demo :

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100px;
}


td {
  height: 20px;
  width: 20px;
  border: black solid 1px;
}

td {
  z-index: 9;
  background-color: white;
  position: relative;
}

.green {
  position: static;
  background-color: green;
}

.red {
  position: static;
  background-color: red;
}

<table>
  <tbody>
    <tr>
      <td class="green">sdfsdfsfsdfs</td>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="green">te</td>
      <td class="green"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="red">longstring</td>
      <td class="red"></td>
      <td class="red"></td>
    </tr>
  </tbody>
</table>

Note : There is some trouble with border style