css - 响应式设计 : absolute positioned div in a table

Question

此屏幕截图基本上演示了我想做的事情。基本上，当用户单击更新图标时，它会打开一个菜单，现在突出显示的编辑图标与原始图标位于相同的位置。

但是，当我更改屏幕大小时，表格行的宽度发生变化并且图标不再对齐。

我希望无论使用什么设备，图标都能对齐，但我不确定如何实现。

未选中单元格的html+css是这样的:

<td style="text-align:right; font-color=blue;">
    <span style="top:3px; position=relative;">
        icon code
    </span>
</td>

以及所选单元格的:

<td>
    <div style="position:absolute; top:5px; right:3.5vw; width:370%;">
        ....
    </div>
</td>

Answer 1

有几种方法可以做到这一点，但最简单的可能是只留下图标，添加菜单，然后使用 z-index 将图标放在它上面:(忽略任何额外的标记，我不是'不确定你的工作示例是什么样的)

*{
  margin:0;
  padding:0;
}
.mytable{
  width:100%;
  background:#FFF;
  font:500 24px/45px Arial;
  table-layout: fixed;
  border:1px solid #CCC;
  border-bottom:none;
  border-collapse:collapse;
}
.mytable td{
  padding:0 25px;
  border-bottom:1px solid #CCC;
}
.mytable td.menu{
  text-align:right;
  position:relative;
  overflow:visible;
  max-width:50px;
}
.mytable input{
  display:none;
}
.mytable i{
  position:relative;
  color:red;
  z-index:1;
  cursor:pointer;
}
.mytable input:checked + label i{
  color:blue;
  z-index:3;
}
.mytable input:checked ~ div{
  display:block;
}
.mytable div{
  display:none;
  position:absolute;
  top:10%;
  right:8%;
  padding-top:35px;
  background:#FFF;
  box-shadow:0 3px 8px rgba(0,0,0,0.5);
  z-index:2;
}
.mytable ul{
  list-style-type:none;  
}
.mytable ul li{
  margin:0;
  padding:0 12px;
  white-space:nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<table class="mytable">
  <tbody>
    <tr>
      <td>Some</td>
      <td>data</td>
      <td>here.</td>
      <td class="menu">
        <input id="input1" type="checkbox" />
        <label for="input1"><i class="fa fa-lightbulb-o"></i></label>
        <div>
          <ul>
            <li>Menu item</li>
            <li>Other menu item</li>
            <li>This menu item</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Some</td>
      <td>data</td>
      <td>here.</td>
      <td class="menu">
        <input id="input2" type="checkbox" />
        <label for="input2"><i class="fa fa-lightbulb-o"></i></label>
        <div>
          <ul>
            <li>Menu item</li>
            <li>Other menu item</li>
            <li>This menu item</li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>Some</td>
      <td>data</td>
      <td>here.</td>
      <td class="menu">
        <input id="input3" type="checkbox" />
        <label for="input3"><i class="fa fa-lightbulb-o"></i></label>
        <div>
          <ul>
            <li>Menu item</li>
            <li>Other menu item</li>
            <li>This menu item</li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/jm8wa6oz/