Issue: when i use style.display none it pulls all objects loses their positions and my table take other width and my graphic web through up my
1-designed without using show and hide
2- when i use the show and hide function
goal: is to fix this issue making my graphic fixed as designed without using show and hide
html,body {
background-image: url('../icones/ain.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container{
margin-top: 200px;
}
.table{
display: inline-block;
width: 500px;
margin: 30px;
}
.button12{
background-color: #60AAEB;
border:0;
margin-left:150px
}
.row{
margin:200px 300px
}
.xy{
background-image: url('../icones/ctb.png');
background-repeat: no-repeat;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/dfirgo.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>FRIGO</title>
</head>
<body>
<div class="row" id="rb">
<?php
session_start();
if(empty($_SESSION['prenon'])){
header("location:index.php");
}
else {
include("php/connexion.php");
$rec = mysqli_query($conn, "SELECT * FROM espace");
$i=0;
while($row=mysqli_fetch_array($rec)) {
$i++;
if( $row[2]=='0' && $row[3]=='0'){
$j=0;
}else {$j=1;}
echo"<table class=\"table\">
<thead class=\"thead-dark\">
<tr>
<th width='400'><img src=\"icones/neige.png\">ESPACE$i<button class='button12' id='bo$i'onclick=\"myFunction('$i','$j')\"><img src=\"icones/élément1.png\" ></button> <img id='do$i' src='icones/red.png'style='position: fixed; display:none'><img id='lo$i' src='icones/gren.png'style='position: fixed; display:none'></th>
</tr>
</thead>
<tbody>
<tr id=$i style='display:none;'>
<td bgcolor='white' >";
echo "<div class='xy' >".$row[1]."</div>"." - "."<img src=\"icones/termo.png\">".$row[2]." - <img src=\"icones/water.png\">".$row[3];
echo " </td>
</tr>
</tbody>
</table>";
}
}
?>
<script>
function myFunction(i,j) {
var l='do'+i;
var m='lo'+i;
var x = document.getElementById(i);
var y = document.getElementById(l);
var z = document.getElementById(m);
if(j==='0'){
y.style.display = "block";
}
else {
z.style.display = "block";
}
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
z.style.display = "none";
y.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
