Question

我正在尝试通过使用表格来创建可拖动元素。

行和列必须粘合在一起。

不允许有空格。

我设法删除了列之间的空格。

如何删除行之间的4px空格？

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>jQuery UI Draggable - Constrain movement</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style>

        table {
            margin: 0;
            padding: 0;
            border: none;
            border-spacing: 0;
            border-collapse: unset;
        }

        table td {
            margin: 0;
            padding: 0;
        }

        .draggable {
            width: 100px;
            height: 100px;
            float: left;
            margin: 0;
            padding: 0;
        }

        #table_containment {
            width: 100%;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
        }

    </style>

    <script>
        $(function () {
            $("#table_draggable").draggable(
                {
                    containment: "#table_containment",
                    scroll: false
                }
            );
        });
    </script>

</head>

<body style="margin:0;">

<table id="table_containment">
    <tr>
        <td>

            <table id="table_draggable" class="draggable ui-widget-content"
                   style="background-color: #eee; margin:0; padding:0;">

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

            </table>

        </td>
    </tr>
</table>

<script>

    $(document).ready(
        function () {
            console.log('on document ready');

            function get_viewport_size() {
                console.log('get viewport size');

                var viewport_width = $(window).width();
                console.log('width');
                console.log(viewport_width);

                var viewport_height = $(window).height();
                console.log('height');
                console.log(viewport_height);

                $('#table_containment').css('width', viewport_width + 'px');
                $('#table_containment').css('height', viewport_height + 'px');

            }

            get_viewport_size();

            $(window).resize(
                function () {
                    get_viewport_size();
                }
            );

        }
    );

</script>

</body>

</html>

JSFiddle

Answer 1

注意：您已经为表格元素中的tr提供了height和float属性

请将样式应用于CSS，然后清除行之间的间隙。

样式是：

table tr
{
     height: 100px;
     float: left;
}

尝试一下并分享您的反馈。

添加CSS之后的

OP：

Answer 2

尝试这个

定义image height 100%，以便删除多余的空间并将图像高度定义为其容器标签

img{
     height:100%;
}

将此内容添加到css上即可。

Answer 3

table {
margin: 0;
padding: 0;
border: none;
border-spacing: 0;
border-collapse: unset;
}

table td {
margin: 0;
padding: 0;
}

.draggable {
width: 100px;
height: 100px;
float: left;
margin: 0;
padding: 0;
}

#table_containment {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
}

table tr {
height: 100px;
float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_containment">
    <tr>
        <td>

            <table id="table_draggable" class="draggable ui-widget-content"
                   style="background-color: #eee; margin:0; padding:0;">

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

                <tr>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                    <td>
                        <img src="https://placekitten.com/g/100/100" style="margin:0; padding:0;"/>
                    </td>
                </tr>

            </table>

        </td>
    </tr>
</table>

如何摆脱表格行之间的空间？

3 个答案: