Накладки на таблицы

Question

Я делаю приложение диаграммы Ганта, используя таблицу в качестве сетки для каждого дня.Когда один из дней выделен, td будет присвоен класс, который меняет свой цвет в зависимости от того, какой ресурс используется.Я пытаюсь поставить метку сверху, которая показывает, какой ресурс выделен, как в примере ниже.

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>

Первые две строки зеленого цвета прекрасно работают.Ярлык переполнен, показывая полное имя.Я добавил 4-ую строку, которая отображается правильно.Однако проблема заключается в третьей строке.Имя длиннее, чем все выделенные дни, поэтому оно переполняется пустыми td s.

Таким образом, единственная строка, которая не отображается должным образом, является третьей.Переполнение должно быть скрыто, чтобы отображалось только «lon».

Есть ли хитрость CSS, которая может остановить переполнение в области с другим фоном / классом?Или, возможно, решение javascript для предотвращения переполнения последнего td?

Answer 1

Вы можете использовать z-index на белой ячейке и назначить позицию static на цветной ячейке, чтобы получить то, что вы хотите.

Демонстрационная версия:

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>

Примечание. Проблема со стилем границ имеет некоторые проблемы