html - 将单元格内容定位在表格之外

Question

我一直在尝试获取 td 的内容在其父级之外可见 table元素。我什至不确定这是否可能，但我想在放弃之前我会在这里问。

我想要做的是“预先添加”一个带有图标的表格行，但我希望它显示在表格旁边，而不是在表格内部。

我尝试将绝对定位应用于图标的容器，它是 div内部td带有负边距，但这会将图标拉到 table 边缘。

生成的表行看起来像这样:

<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 .