Как избавиться от пространства между строками таблицы? - PullRequest
Новая
       1

Как избавиться от пространства между строками таблицы?

0 голосов
/ 15 октября 2018

Я пытаюсь создать перетаскиваемый элемент с помощью таблицы.

Строки и столбцы должны быть склеены.

Запрещено использовать пробелы.

Iудалось удалить пробел между столбцами.

Как удалить пробел в 4 пикселя между строками? 

<!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

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Примечание: Вы предоставили свойство height и float для tr, которое доступно в элементе таблицы

. Пожалуйста, примените стиль к CSS и зазор между строками будет очищен.

Стиль: 

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

Попробуйте и поделитесь своим мнением.

OP после добавления css:

enter image description here

0 голосов
/ 15 октября 2018 

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>
0 голосов
/ 15 октября 2018

попробуйте этот

define image height 100%, чтобы он удалил дополнительное пространство и определил высоту изображения в качестве тега контейнера 

img{
     height:100%;
}

добавьте это на css, это будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...