Question

我想让一个表格单元看起来是可缩放的，也就是说，表格单元格似乎会脱离其表格并自由浮动。

我现在面临的问题是，当一行中没有其他单元格时，整个行在其单个单元格浮动时会崩溃。

参见代码：

<body style="position: relative;">
    <script src="http://cdn.jsdelivr.net/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        * { text-align: center; }
        td {
            width: 200px;
            height: 200px;
        }
    </style>

    <table>
        <tr>
            <td style="background: #0000ff;"></td>
            <td style="background: #00ff00;"></td>
            <td style="background: #ff0000;"></td>
        </tr>
        <tr>
            <td id="thistd" colspan="3" style="background: #808080; ">click me</td>
        </tr>
        <tr>
            <td style="background: #ffff00;"></td>
            <td style="background: #ff00ff;"></td>
            <td style="background: #00ffff;"></td>
        </tr>
    </table>

    <script type="text/javascript">
        $('#thistd')
            .css('cursor', 'pointer')
            .on('click', function() {
                $(this)
                    .css('position', 'absolute')
                    .css('left', '500px')
                    .css('top', '10px');
            });
    </script>
</body>

在点击表格之前，似乎是：

table before

点击表格后如下：

table after

如何防止中间行崩溃？

Answer 1

修改脚本，以便在浮动行时插入重复的行。

Answer 2

如果您不想移动或折叠该行，那么我们可以在行中放置一个div并让div移动到我们想要的位置。如下所示

<tr>
    <td colspan="3" style="background: #808080; "><div id="thistd" style="background: 808080; click me</div></td>
</tr>

和此div的javascript与之前相同

$('#thistd').css('cursor', 'pointer')
            .on('click', function() {
                $(this)
                    .css('position', 'absolute')
                    .css('left', '500px')
                    .css('top', '10px');
});

检查此链接http://jsfiddle.net/XhYs6/是否仍未满足要求要求更多...

Answer 3

请尝试使用absolute。

，而不是使用relative

FIDDLE

    $('#thistd')
        .css('cursor', 'pointer')
        .on('click', function() {
            $(this)
                .css('position', 'relative')
                .css('left', '500px')
                .css('top', '10px');
        });

请注意，left和right属性将相对于其原始位置而不是父级。但是，您可以从父级计算其位置，以某种方式使其相对于它。见fiddle

$('#thistd')
        .css('cursor', 'pointer')
        .on('click', function() {
            $(this)
                .css('position', 'relative')
                .css('left', 50)
                .css('top', -$(this).position().top + 10);
        });

使表中的整行浮动，同时保留所有其他行

3 个答案: