Question

我无法将图标保留在表格单元格的一个位置（在这种情况下，是表格单元格的右下角）。当我在单元格中输入一些文本时，图标的位置会移到怪异的位置，这不是我想要的。

<style>
table, th, td {
font-size: 16px;
text-align:center;

}
i.fa-pencil {
position: fixed;
right: 1160px;
bottom:520px;
}
td{
height:100px;
}

</style>

<td ><div class="row_data" edit_type="click" col_name="description"><i class="fa fa-pencil"></i>+val['description']+</div></td>

之前：

之后：

Answer 1

您需要将元素absolute放置在fixed上。

table,
th,
td {
  font-size: 16px;
  text-align: center;
}

.row_data {
  position: relative;
  padding-right: 25px;
}

i.fa-pencil {
  position: absolute;
  right: 0;
  bottom: 0;
}

td {
  height: 100px;
}

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<body>
  <table>
    <tbody>
      <tr>
        <td>
          <div class="row_data" edit_type="click" col_name="description"><i class="fa fa-pencil"></i> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

如果您的要求不同，请通过示例发布。

Answer 2

在图标上使用fixed位置代替absolute位置，请参见下面的演示

table, th, td {
font-size: 16px;
text-align:center;

}

td{
height:100px;
}

table, th, td {
  border: 1px solid black;
}
td {
    position: relative;
}

td .fa {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 6px;
    cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
  <tr>
    <td>Cell A</td>
    <td ><div class="row_data" edit_type="click" col_name="description"><i class="fa fa-pencil"></i>hfjkdf fhdks fhdsk fdshjk</div></td>
  </tr>
</table>

Answer 3

尝试这种方式：

.row_data{
    position:relative;
}
i.fa-pencil { 
    position: absolute; 
    right: 0px; 
    bottom:0px;
}

根据您想要的边距来右移或右移。

输入文本后，将图标保留在表格单元格的右下角

3 个答案: