如何将覆盖表格的 div 粘贴到一个特定位置？

Posted 2023-03-06

【中文标题】如何将覆盖表格的 div 粘贴到一个特定位置？

【英文标题】：How can I stick my div that is overlaying a table to one specific position?

【发布时间】：2018-08-14 08:24:23

【问题描述】：

我的左侧表格列是固定的，但表格的其余部分是可水平滚动的。我现在想在该表上方放置一些 div 并将其粘贴到特定的颜色和日期。例如，我的蓝色 div 应该停留在位置“蓝色”和“4 月 4 日”。实现这一目标的最佳方法是什么？

jQuery(document).ready(function() 
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
);

.table-scroll 
  position: relative;
  margin: auto;
  overflow: hidden;


.table-wrap 
  width: 100%;
  overflow: auto;


.table-scroll table 
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;


.table-scroll th,
.table-scroll td 
  padding: 5px 10px;
  white-space: nowrap;
  vertical-align: top;


.clone 
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;


.clone th,
.clone td 
  visibility: hidden


.clone td,
.clone th 
  border-color: transparent


.clone tbody th 
  visibility: visible;


.clone .fixed-side 
  visibility: visible;
  background-color: #fff;
  font-weight: normal;
  border: none;
  border-right: 2px solid #f4f4f4;


.clone thead,
.clone tfoot 
  background: transparent;


.gantt-h 
  font-weight: normal;
  color: #b0b0b0;
  border-right: 2px solid #f4f4f4;


.last 
  border-right: 2px solid #f4f4f4;


.gantt td 
  border-right: 2px solid #f4f4f4;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table table gantt">
      <thead>
        <tr>
          <th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0">Task</th>

          <th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;">30 Mar</th>
          <th scope="col" class="gantt-h">31 Mar</th>
          <th scope="col" class="gantt-h">01 Apr</th>
          <th scope="col" class="gantt-h">02 Apr</th>
          <th scope="col" class="gantt-h">03 Apr</th>
          <th scope="col" class="gantt-h">04 Apr</th>
          <th scope="col" class="gantt-h">05 Apr</th>
          <th scope="col" class="gantt-h">06 Apr</th>
          <th scope="col" class="gantt-h">07 Apr</th>
          <th scope="col" class="gantt-h">08 Apr</th>
          <th scope="col" class="gantt-h">09 Apr</th>
          <th scope="col" class="gantt-h">10 Apr</th>
          <th scope="col" class="gantt-h">11 Apr</th>
          <th scope="col" class="gantt-h">12 Apr</th>
          <th scope="col" class="gantt-h">13 Apr</th>
          <th scope="col" class="gantt-h">14 Apr</th>
          <th scope="col" class="gantt-h">15 Apr</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side"><i class="fa fa-folder-open-o" style="color:#9e9e9e"></i> Projekt 1</th>

          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> blue</th>

          <td></td>
          <td>
            <div style="background-color:#62bbd1;width:100%;height:100%"></div>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> green</th>

          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> yellow</th>

          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> pink</th>

          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> orange</th>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>

    </table>
  </div>
</div>


<div style="background-color:#62bbd1;width:212px;position:absolute;left:378px;top:81px;padding:6px;color:white;text-align:center">blue</div>
<div style="background-color:#67ccc1;width:432px;position:absolute;left:433px;top:118px;padding:6px;color:white;text-align:center">green</div>

【参考方案1】：

我建议绘制表格单元格，不要在表格上方使用 div。您可以使用计算行中单元格的函数并添加“类”或“数据属性”来更改颜色。我相信这种方式更容易控制吧。