Question

所以，我的桌子有问题。它有3个tds是该行的单元格，其中3个是来自jquery的可放置对象，我的问题是每次我在它们上拖放一个可拖动对象时，单元格的高度都会发生变化，并且它会改变表格的整体高度。我尝试使用css属性table-layout：fixed，但如果您可以帮助它，它将无法正常工作... 我目前正在使用带有引导程序的jquery，javascript，css，html，在此先感谢

表

<div class="row">
                    <div class="col-12 tabla">
                        <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th scope="col">Deportivas</th>
                                  <th scope="col">Culturales</th>
                                  <th scope="col">Otras</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>

                                  <td>Ir a atletismo</td>
                                  <td class="td1"></td>
                                  <td>Ir al cumpleaños</td>
                                </tr>
                                <tr>

                                  <td class="td2"></td>
                                  <td>Ir al museo</td>
                                  <td class="td3"></td>
                                </tr>
                                <tr>

                                  <td class="raya"><span class="raya-tb">&#8212;</span></td>
                                  <td class="raya"><span class="raya-tb">&#8212;</span></td>
                                  <td class="libro">Leer un libro</td>
                                </tr>
                              </tbody>
                            </table>
                    </div>
                </div>
            </div>

表的CSS

.tabla{
  margin-top: 15%;
}

table
{
  width: 100%;
  height: 100%;
  table-layout: fixed !important;
}

td
{
  padding: 0;
}

和javascript + jquery脚本

$("#draggable, #draggable2, #draggable3").draggable(
            {
                cursor: "move",
                helper: 'clone',
                revert: "invalid"

            }
        );

        $(".td3").droppable(
            {
                tolerance: "intersect",
                accept: "#draggable",
                drop: function(event, ui) {
                    $(".td3").append($(ui.draggable));
            }
        });

Answer 1

尝试将这些样式添加到CSS

td.ui-droppable {
   position: relative;
}
td.ui-droppable .ui-draggable {
   position: absolute;
   left: 0;
   top: 0;
}

Answer 2

所以我最终放弃了，尝试执行将p可拖动到表的td（单元格）中的操作，然后用一些不透明度为0的文本包装div，然后将p拖动到滴管，可拖动到div，因为div上已经有文本，所以它不会更改td的大小。我从中学到的两件事是，带有可拖动对象的表会执行意外的操作，其次总是将您的项目包装在div上。谢谢

每次我在其上拖放一个表格时，表格都会更改行的高度

2 个答案: