拖入 GIF 时表格变形答案

【问题标题】：Table deformed when GIF dragged in拖入 GIF 时表格变形
【发布时间】：2018-08-24 17:59:23
【问题描述】：

为什么当我将 gif 拖入单元格时表格会变形？我该如何解决？我希望表格（和每个单元格）保持我将 gif 拖入单元格时的大小。

这是我的情况的一个 jsfiddle： http://jsfiddle.net/MjMcr/3/

<body>
<img id="drag1" src="http://files.myopera.com/supersagitta/Pokemon/BW_Sprites/Pikachu.gif" draggable="true" ondragstart="drag(event)">
<div id="play1">
    <table border="1" class="play">
        <tr>
            <td>
                <div id="div1" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
            <td>
                <div id="div2" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
            <td>
                <div id="div3" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="div4" class="room left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
            <td>
                <div id="div5" class="room center" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
            <td>
                <div id="div6" class="room right" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </td>
        </tr>
    </table>
</div>

CSS

.play {
width: 100%;
height: 100%;
}
.play td {
}
.play .room {
    width:100%;
    height:100%;
    border:1px solid #aaaaaa;
}
.left{
    background-color:blue;
}
.center{
    background-color:white;
}
.right{
    background-color:red;
}

javascript

    function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

【问题讨论】：

请注意，表格用于表格数据。您需要在 CSS 中设置明确尺寸的六个 div。
所以我不应该使用table？
除非它是真正的表格数据。使用单个 div 作为“父”，其中有六个 div，以便它们排列 3/3 为您提供更大的灵活性，并且使用 CSS 选择器找到正确的“单元格”仍然非常容易（本机使用 document.querySelector ，或使用类似 jQuery 的东西）。在这种情况下，重要的部分是单元格实际上都有一个真实的宽度，否则它们会调整大小以适应您的内容，并且看起来会非常错误（无论表格与 div 是什么）

标签： javascript css html-table

【解决方案1】：

只需将 table-layout: fixed; 添加到表中，并将 height: 50%; 添加到您的行中：

http://jsfiddle.net/MjMcr/4/

这解决了您的问题 - 但您应该注意，正如 cmets 中所说，您根本不应该使用表格来构建它。表格用于表格数据，而不是用于构建布局。也许你不想看this question on SO ("Why not use tables for layout in HTML?")

【讨论】：