установить абсолютное значение в div в td

#html #html-table #microsoft-edge

#HTML #html-таблица #microsoft-edge

Вопрос:

У меня есть div с именем «divOverlay», где он будет отображаться при наведении курсора мыши на строку. Поэтому мне нужно, чтобы оно было установлено как абсолютное внутри td. В настоящее время он работает в Chrome, но когда я просматриваю его в Edge, он находится за пределами td, как показано ниже, а это не то, что я хочу. Я хочу, чтобы цель кнопки оставалась внутри td:

Могу ли я заставить его работать как для Chrome, так и для edge browser?

 <!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr style="transform:scale(1);">
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td><div class="divOverlay" style=" top: 0px; width: 58px; text-align: right; right: 0px; padding-top: 5px; padding-right: 25px; position: absolute; z-index: 1000;"><button title="Update" class="btn btn-success btn-xs amenddocbtn" type="button">TARGET</button></div></td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

Ответ №1:

Удалите transform: scale(1) тот tr , который содержит button элемент, и он будет работать.

Из этой ссылки

Если свойство имеет значение, отличное от none, будет создан контекст стекирования. В этом случае элемент будет действовать как содержащий блок для любых элементов position: fixed или position: absolute, которые он содержит.

Будет создан объект стекирования, и из-за этого он работает не так, как вы ожидали.

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.divOverlay {
  top: 0;
  width: 58px;
  text-align: right;
  right: 0px;
  padding-top: 5px;
  padding-right: 25px;
  position: absolute;
  z-index: 1000;
}

 <h2>HTML Table</h2>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>
      <div class="divOverlay">
        <button title="Update" class="btn btn-success btn-xs amenddocbtn" type="button">TARGET</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Ответ №2:

Я пытаюсь проверить проблему, и похоже, что у вас возникла эта проблема в устаревшем браузере MS Edge.

Я обнаружил, что top: 0px; и position: absolute; то, что вы добавили в встроенный стиль для DIV, вызывает эту проблему в устаревшем браузере MS Edge.

проблема может быть устранена путем удаления top: 0px; и position: absolute; из встроенного стиля DIV.

Модифицированный код DIV:

 <div class="divOverlay" style="width: 58px; text-align: right; right: 0px; padding-top: 5px; padding-right: 25px; z-index: 1000;">
<button title="Update" class="btn btn-success btn-xs amenddocbtn" type="button">TARGET</button>
</div>

Вывод в устаревшем браузере MS Edge и браузере Google Chrome: