<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="over" style="background-color:yellow;position:absolute;top:0px;left:0px">
<tr>
<td>xxxxxxx</td>
</tr>
<tr>
<td>yyyyyyy</td>
</tr>
</table>
<table id="t1">
<tr>
<th>head1</th>
<th>head</th>
<th>head</th>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
</table>
<script>
tab = document.getElementById('t1');
rect = tab.rows[1].getBoundingClientRect();
over = document.getElementById('over');
over.style.left = rect.left + 'px';
over.style.top = rect.top + 'px';
</script>
</body>
</html>
Я хочу наложить часть таблицы t1 на другую таблицу, overlay , расположив таблицу наложения с помощьюабсолютная позиция верхней / левой части первого ряда в таблице t1.Заданная позиция формы первого ряда t1 правильна в Chrome, но отключена на +1 в Firefox для верхнего / левого.
Firefox дает это
Chrome это:
Если вы запустите приведенный выше код, вы увидите смещение в Firefox и Edge.В Chrom, Opera и Brave вы не увидите смещения.Это раздражает, так как мне нужны точные позиции для того, чего я хочу достичь.
Любые идеи?
С уважением