html - 如何将特定的 tr 跳到右边？

Question

我有使用行分组插件的数据表。我想向右跳转组内的行。

简单地说:.group-item 类 TR 应该向右移动 10px。如何做到这一点？

我试过 display:block 而不是 margin-left:10px，但这会破坏列宽。

Answer 1

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

方案一，嵌套新表

<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> 来完成。作为相关行的第一个 child ，但是父表的所有先前的第一个 child 都必须有 col-span设置为 2(对于其下方的每个嵌套表格 +1)。您会明白为什么这是个坏主意。

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