Question

我有一张桌子，有些行是隐藏的（display：none;）。

我想将图像放在隐藏行所在的左侧（表示此处有隐藏的行）。它需要在桌子外面，有点漂浮在行的左边。

最好的方法是什么？猜测它是浮动CSS属性，相对或绝对定位的一些组合，但是没有设法使用一个有效的组合（图像最终在表内，或者更糟糕的是，相对于表本身，而不是相对于表行

由于

Answer 1

您可以隐藏行元素，而不是隐藏行。这使我们可以方便地使用:before伪选择器。

<table>
<tr>
  <td>Name</td>
  <td>Fellow</td>       
  <td>Something</td>
</tr>
<tr class="hidden">
  <td>Some</td>
  <td>Guy</td>      
  <td>Other</td>
</tr>
<tr>
  <td>Pal</td>
  <td>Dude</td>     
  <td>Misc</td>
</tr>
<tr>
  <td>Fellow</td>
  <td>Friend</td>       
  <td>Various</td>
</tr>
</table>

CSS：

table {
    position: relative;
}

.hidden {
    display: inline; /* Fix height issue if it exists */
}

.hidden > td {
    display: none;
}

.hidden:before {
    content: ">"; /* You can insert an image here using url() */
    position: absolute;
    margin-left: -10px;
    margin-top: -8px;
}

Answer 2

我会在该行的左侧添加一个隐藏的列，并将此图像放在此列的单元格中，因此看起来位于现有表格的左侧。

请发布一些HTML，以帮助您准确了解您要实现的目标。

Answer 3

您应该使用visibility: hidden代替display: none

visibility: hidden会隐藏你的元素，但会保留元素的高度/宽度。

display: none会隐藏你的元素及其各自的空间，很难分辨哪一行被隐藏。

示例：http://jsfiddle.net/FLcYS/

将图像放在表格行的左侧（表格外）

3 个答案: