0

是否可以在不使用空元素的情况下将一个颜色框浮动到表格行的左侧？

我想<span></span>首先摆脱，<td>如果可能的话只使用纯CSS。

它应该看起来像这样

小样

这是我目前拥有的：

<table border="1">
    <tr>
        <td><span></span>float a box of any color to the left of this row</td>
    </tr>
    <tr>
        <td>it should be the same heieght as the row</td>
    </tr>
    <tr>
        <td>and 15 pixels wide</td>
    </tr>
</table>

table {
    margin: 10px 10px 10px 25px;
}

table td {
    position: relative;
    padding: 5px;

}

/* can i achieve the same effect without having
   to rely on a <span> element? */
table td span {
    position: absolute;
    top: 0;
    left: -20px;
    width: 15px;
    height: 100%;
    background-color: green;
}

在cssdeck上玩它

4

3 回答 3

2

用伟大的哲学家 Beastie Boys 的话来说，CH-CH-CHE-CH-CHECK IT OUT：http ://cssdeck.com/labs/hxfa4xzz

仅使用 CSS 的:before伪选择器和content:属性是可行的。

table {
  margin: 10px 10px 10px 25px;
}

table td {
  position: relative;
  padding: 5px;
}

table tr:first-child td:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -20px;
  width: 15px;
  height: 100%;
  background-color: green;
}
于 2013-02-12T17:40:03.987 回答
1

我已经修改了您的示例以显示如何使用 CSS 来完成它：之前，但这在旧浏览器中不起作用，但这意味着没有额外的标记（除了一个用于识别哪一行/列的类）。

http://cssdeck.com/labs/08h7pcbn

您可以对其进行修改以将其应用到行而不是单元格上，但我将其尽可能接近您的示例。

希望有帮助。

于 2013-02-12T17:36:10.200 回答
0

老实说，如果您想坚持使用表格格式，我只需<td>在每一行中添加另一个并将一个类应用于<td>您想要具有该样式的 's 。

<table border="1">
    <tr>
        <td class="green_box"></td>
        <td>float a box of any color to the left of this row</td>
    </tr>
    <tr>
        <td class="clear_box"></td>
        <td>it should be the same heieght as the row</td>
    </tr>
    <tr>
        <td class="clear_box"></td>
        <td>and 15 pixels wide</td>
    </tr>
</table>
于 2013-02-12T17:31:42.463 回答