【html布局】table布局_html5 机柜布局展示-CSDN博客

本文链接：https://blog.csdn.net/m0_67768261/article/details/125435251

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/demo1/js/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<div id="container">
  <div class="item item-1"></div>
    <div class="item item-2">
        <div id="container1">
            <div class="item item-4"></div>
            <div class="item item-5">
               <table class="table">
                <tr>
                    <td colspan="3">00000</td>
              	 </tr>
                <tr>
                    <td>11111</td>
                    <td>22222</td>
                  	<td>33333</td>
                </tr>
            </table>
            </div>
            <div class="item item-6"></div>
        </div>
    </div>
    <div class="item item-3">3</div>
</div>
</body>

</html>







body{
  background: #5a6268;
}
span {
  font-size: 2em;
}
#container{
  width:100%;
  height: 100%;
  position: absolute;
  display: grid;
  /*   grid-template-columns: 50px 50px 50px ;
  grid-template-rows: 50px 50px 50px; */
  grid-template-columns: 100%;
  grid-template-rows: 20% 60% 20%;
}

.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

#container1{
  width:100%;
  height: 100%;
  position: relative;
  display: grid;
  /*   grid-template-columns: 50px 50px 50px ;
  grid-template-rows: 50px 50px 50px; */
  grid-template-columns: 20% 60% 20%;
  grid-template-rows:100% ;
}
table{
    width:100%;
  height: 100%;
  position: relative;
  background-color: #4ba946;
}
td{
  background-color: #f68f26;
  margin:10px;
  font-size: 12px;
  text-align: center;
  vertical-align:middle
}