Table deformed when GIF dragged in

Question

Why does the table deform when I drag my gif into the cells? How can I fix that? I want the table (and each cell) to stay the size it is when I drag the gif into the cells.

Here is a jsfiddle of my situation: 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));
}

Note that tables are for tabular data. You want six divs with explicit dimensions set in CSS. — Mike 'Pomax' Kamermans, Jun 17 '13 at 17:14
not unless it's really tabulated data. using a single div as "parent", with six divs inside of it so that they line up 3/3 gives you much more flexibility, and finding the right "cell" is still pretty easy with a CSS selector (natively using `document.querySelector`, or with something like jQuery). In this case, the important part is that the cells all actually have a real width, otherwise they're resize to fit your content, and things'll look very wrong (regardless of table vs div) — Mike 'Pomax' Kamermans, Jun 18 '13 at 01:17

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

just add table-layout: fixed; to the table and height: 50%; for your rows:

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

this solves your problem - but you should note that, as said in the comments, you shouldn't use a table to build this at all. a table is meant for tabular data, not to build a layout. maybe you wan't to read this question on SO ("Why not use tables for layout in HTML?")

edited May 23 '17 at 10:32

Community

1
1

answered Jun 17 '13 at 17:17

oezi

51,017
10
98
115

Table deformed when GIF dragged in

1 Answers1