Question

我有一个html表，我想在每条水平边框线的左边，即每对行之间，显示一个“插入行”按钮。这是为了清楚插入行的位置。

我怎样才能在css中做到这一点？

如果我只是在单元格中添加按钮，则它们没有在边框线旁边垂直放置。此外，我需要3个按钮，因为行可以插入3个不同的地方。（我还希望按钮仅在悬停在它们上方时出现，但这是另一个问题）

<table>
  <tr>
    <td>
      <button>insert</button>
    </td>
    <td>
      first row
    </td>
  </tr>
  <tr>
    <td>
      <button>insert</button>
    </td>
    <td>
      second row, <br>on multiple lines
    </td>
  </tr>
</table>

Answer 1

＆＃13;

table,
td {
  border: solid 1px red;
}
table {
  border-collapse: collapse;
  margin-left: 60px;
}
td {
  position: relative;
}
td button {
  position: absolute;
  top: 100%;
  margin-top: -8px;
  left: 0;
  margin-left: -60px;
}
td button::after {
  position: absolute;
  content: '▸';
  right: 0;
  margin-right: -10px;
  top: 1px;
}

＆＃13;

<table>
  <tr>
    <td>
      <button>Insert</button>
      first row
    </td>
  </tr>
  <tr>
    <td>
      <button>Insert</button>
      second row,
      <br>on multiple lines
    </td>
  </tr>
  <tr>
    <td>
      third row
    </td>
  </tr>
</table>

＆＃13;

Fiddle

请注意，使用特定像素值的定位当然可能不是最好的方法，但你明白了。

如何在表的每个水平行边框前面定位“插入行”按钮？

1 个答案: