Question

我一直试图让td的内容在其父table元素之外可见。我甚至不确定这是可能的，但我想在放弃之前我会问这里。

我要做的是“添加”带有图标的表格行，但我希望它显示在表格旁边，而不是在其中。

我尝试将绝对定位应用于图标的容器，div内部为td，边距为负，但会将图标拉到表边缘。

生成的表格行如下所示：

<tr>
  <td>
    <div class="icon-container">  // I want this to display
      <i class="icon"></i>        // to the left of the row
    </div>                        // outside of the table
    Cell content here
  </td>
  ...
</tr>

Answer 1

除非我严重误解你所追求的东西，否则这是微不足道的。如果图标始终位于每行的最左侧td，则可以使用图标容器上的相对位置执行此操作。只需将图标的宽度加上表格边框的大小向左移动，并使用一些填充物进行测量。

.icon-container {
    position:relative;
    left:-17px;
    height:0; overflow:visible;
}
.icon-container .icon {
    display:block; width:10px; height:10px;
    background-color:green; border-radius:5px;
}

这就是全部。相对定位不会影响周围的其他元素，因此您无需做任何其他事情。

Fiddle

Answer 2

我不认为定位在表/行/单元格上运行良好或完全没有效果。这就是我所做的JSFiddle。因为我希望容器在外面，所以我将它包装在另一个容器中。我将外部容器设置为相对位置，将内部容器设置为绝对定位。然后，我可以给内部容器提供我想要的任何左/顶部。外部容器的宽度和高度必须为0，否则将推动单元格内容。

<table>
    <tr>
        <td>
            <div class = "icon-super-container">
                <div class = "icon-container">
                    <i class = "icon"></i>
                </div>
            </div>
            Cell content here
        </td>
        <td>More cell stuff</td>
    </tr>

    <tr>
        <td>
            <div class = "icon-super-container">
                <div class = "icon-container">
                    <i class = "icon"></i>
                </div>
            </div>
            Cell content here
        </td>
        <td>More cell stuff</td>
    </tr>
</table>

C

table {
    margin-left:100px;
    margin-top:50px;
    border:1px solid blue;
    padding:15px;

}

td {
    border:1px solid black;
}

.icon-super-container {
    position:relative;
}

.icon-container {
    background-color:red;
    width:10px;
    height:10px;
    position:absolute;
    left:-15px;
    top:2px;
}

在表格之外定位单元格内容

2 个答案: