响应式设计：表中的绝对定位div

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将图标放在其上:(忽略任何额外的标记，我不是＆＃ 39;确定你的工作示例是什么样的）

＆＃13;

＆＃13;

*{
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/jm8wa6oz/