表每次我拖放一个可拖动的行时，表格会改变行的高度

Question

所以，我遇到了一个桌子的问题。它有3个tds是行的单元格，其中3个是来自jquery的droppables，我的问题是每次我在它们上面放一个draggable，单元格的高度会改变，它会改变表格的整体高度。我尝试使用css属性table-layout：fixed但它不工作plz如果你可以帮助它会很棒...我目前正在使用jquery，javascript，css，html with bootstrap，在此先感谢

表

<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 draggable放入表格的td（单元格）中，然后用一些不透明度为0的文本包装div，然后当p被拖入dropper时， draggable进入div，因为div已经有一个文本，它不会改变td的大小。好吧，我从中学到了两件事，带有可拖动的表做了意想不到的事情，第二件事总是将你的物品包裹在一个div上。谢谢