Question

我有数据表表用于rowgrouping插件。我想在组内跳到右边的行。

简单地说：.group-item类TR应该移动让我们说10px到右边。怎么做？

我尝试过显示：block和margin-left：10px，但这会打破列宽。

Answer 1

由于HTML表的性质，跳转到html <tr>是不可能的。你必须稍微改变一下结构。

选项1，嵌套新表

<style>
    .subTable {
        margin-left: 10px;
    }
</style>

<table>
    <tr>
        <td>
            <table class="subTable">
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

选项2是使用其他类型的结构并模拟表格外观：

<style>
    .jump-over {
        position: relative;
        left: 10px;
    }
</style>

<div class="table">
    <div class="row">
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
    </div>
    <div class="row jump-over">
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
    </div>
    <div class="row">
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
        <div class="span1"></div>
    </div>
</div>

其他CSS应该很简单，并由您的个性化设计决定。您可以使用网格框架为您执行行和列，但我不会尝试使其响应，因为这会破坏表模拟。

以前的两个选项都不会保留原始表格的列宽;子表将根据其内容拥有自己的列宽，并且div必须明确设置宽度才能开始。还有一个我不建议的非常难看的选项：可以通过插入额外的<td>作为相关行的第一个子节点来完成，但是父表的所有先前的第一个子节点必须具有col-span设置为2（其下方的每个嵌套表都为+1）。你可以看出为什么这是个坏主意。

免责声明：这是未经测试的代码，仅用于说明技术。

如何将特定tr跳到右边？

1 个答案: