Question

我试图获得坐在桌子外面的按钮的效果，这些按钮与它们影响的表格行一致。为此，我试图使用伪元素。如果我使用：在表行之后，我可以很容易地实现这一点，但是如果我之前使用它，它会将伪元素视为表行中的新td，并将所有内容推送到一个td，使表格不对齐。

<table class="saInstrcutionTable">
    <thead>
        <tr>
            <th></th>
            <th>Level</th>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="saLevel">
            <td><input type="checkbox" name="level1"></td>
            <td>Level 1 Name</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="moveTableLevel">
            <td><input type="checkbox"></td>
            <td>1.01</td>
            <td>A.Truck, B.Car, C. House</td>
            <td>Say look at that, turn head and point</td>
            <td>CLorem ipsum</td>
        </tr>
        <tr class="moveTableLevel">
            <td><input type="checkbox"></td>
            <td>1.02</td>
            <td>A.Truck, B.Car, C. House</td>
            <td>Say look at that, turn head and point</td>
            <td>CLorem ipsum</td>
        </tr>    
        <tr class="moveTableLevel">
            <td><input type="checkbox"></td>
            <td>1.03</td>
            <td>A.Truck, B.Car, C. House</td>
            <td>Say look at that, turn head and point</td>
            <td>CLorem ipsum</td>
        </tr>    
        <tr class="moveTableLevel">
            <td><input type="checkbox"></td>
            <td>1.04</td>
            <td>A.Truck, B.Car, C. House</td>
            <td>Say look at that, turn head and point</td>
            <td>CLorem ipsum</td>
        </tr>                
    </tbody>
</table>

我正在使用moveTableLevel类添加项目以添加附加到表格行的按钮

.moveTableLevel:before
position: relative
content: 'up'

如果我使用：在所需效果正常工作后，我不想要表格右侧的按钮。有没有办法实现这一点（可能使用伪元素）？：之前似乎想要添加一个全新的TD。谢谢！

编辑：在此处显示实例http://jsfiddle.net/9mLd6v9L/

Answer 1

我有类似的问题（实际上几乎完全一样）。我最终做的是使用:after psuedo元素，但使用position: absolute将其移动到我想要的位置并设置left: 0样式。

所以我用这个更新了你的fiddle，并在整个表的左侧添加了一个填充（这样你就可以看到内容了）

.moveTableLevel:after {
    position: absolute;
    content: 'up';
    left: 5px;
}

这与我使用绝对定位（我认为应该尽可能少）的信念背道而驰，但这是我能解决它的唯一方法。希望这也适合你。

Answer 2

我只是遇到了同样的问题。我发现我也可以通过按下标题来简单地重新调整内容：

table thead tr::before {
    content: "";
}

使用：before（或：after）或table tr

2 个答案: