4

我一直试图让 a 的内容在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>
4

2 回答 2

3

除非我严重误解了您的要求，否则这是微不足道的。如果图标始终位于每行的最左侧 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;
}

就这样。相对定位不会影响它周围的其他元素，因此您无需执行任何其他操作。

小提琴。

于 2013-10-30T20:49:52.607 回答
1

我认为定位在表格/行/单元格上效果不佳或根本不合适。这就是我所做的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;
}
于 2013-10-30T20:12:28.003 回答