时间戳

首页 > 解决方案 > 阻止 div 在桌子上重叠

javascript - 阻止 div 在桌子上重叠

问题描述

我希望 div 能够识别其空间中已经存在 div 并向下移动空间。在此示例中，我使用了一个超出其 td 宽度的 div (stuff1)，并且我希望它被重叠的 td 中的其他 div (stuff4) 容纳和/或容纳。

现表：

图像1

我多么想要

图2

    table, th, td {
        border: 1px solid black;
        }
</style>
</head>
<body>
<style>
.red{
     background-color:red;
     height:20px;
     margin-top:2px;
}
.yellow{
    background-color:yellow;
    height:20px;
    margin-top:2px;
}

.head{
background-color:aliceblue;
    height:20px;
    margin-top:2px;
    position:relative;
    top:0;
    
}

td{
vertical-align:top;
}
<table style="width:100%">
  <tr>
    <th>StuffList1</th>
    <th>StuffList2</th> 
    <th>StuffList3</th>
  </tr>
  <tr>
    <td>
    <div class="head">1</div>
    <div class="red" style="width:150%">stuff1</div>
    <div class="red" style="width:100%">stuff2</div>
    </td>
    <td>
    <div class="head">2</div>
    <div class="yellow">stuff4</div>
    </td>
    <td>
    <div class="head">3</div>
    <div>stuff5</div>
    <div>stuff6</div>
    </td>
   </tr>
</table>

标签： javascripthtmlcss

解决方案

您只需要在第二个 td 中再添加一个 div，如下所示，

 <td>
        <div class="head">2</div>
        <div class="red" style="width:50%"></div>
        <div class="yellow">stuff4</div>
 </td>

使用此代码，您将达到您想要的结果，但我更喜欢您应该使用带有 rowspan 和 colspan 的 tr td 标签

推荐阅读