Question

我创建了一个表，并希望为用户提供删除某一行的选项，但我不能将删除符号垂直居中放在行内。此时，删除符号不会从底部移动表行，我不知道如何解决这个问题，所以任何帮助表示赞赏！

问题区域在Javascript和CSS中显示并带有注释！这就是现在的样子（正如您所知，删除标志不在垂直中心）：

这就是我希望它看起来像（photoshopped）：

CODE：

function createTable() {
    var table = "<table><tr><td>Name<span class='special'>▲</span></td><td>Age<span class='special'>▲</span></td><td>Sex</td></tr>";
  for(var i=0;i < array.length;i++){
        if (array.length > 0){
    table += "<tr><td>" + array[i].name + "</td>";
    table += "<td>" + array[i].age + "</td>";
    // THIS IS THE ROW OF THE PROBLEM
    table += "<td>" + array[i].sex + "<span class='delete'><a><i class='fa fa-trash-o' aria-hidden='true'></i></a></span></td></tr>"; 
    }
  }
  table += "</table>";
  document.getElementById("tablePrint").innerHTML = table;
}

#tablePrint {}

table {
  position:relative;
  z-index:0;
  overflow:hidden;
  border:1px solid black;
  border-radius:5px;
  border-collapse: collapse;
  display:block;
  max-width:600px;
  width:100%;
  margin:0 auto;
  margin-top:50px;
  background-color:white;
  -webkit-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
  -moz-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
  box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
}

tr {
  color:black;
  font-size:18px;
  font-weight:400;
}

tr:nth-child(odd){
  background-color:#C5C5C5;
}

tr:first-child {
  background-color:#191919;
  color:#D3D3D3;
  font-size:23px;
  font-weight:200;
}

tr:first-child td {
  border-bottom:4px solid #696969;
}

tr:last-child td {
  border-bottom:0;
}

td {
  position:relative;
  overflow:hidden;
  width:200px;
  height:auto;
  padding:20px;
  border-bottom:1px solid #474747;
  border-right: 1px solid #474747;
}

td:last-child {
  border-right:0;
}

td span.special {
  display:block;
  float:right;
  cursor:pointer;
}

// THE PROBLEM 

.delete {
  position:absolute;
  text-align:center;
  height:64px;
  width:40px;
  right:0;
  top:0;
  bottom:0;
}

.delete a {
  position:relative;
  top:50%;
  margin-top:-30px;
  font-size

<div id="tablePrint"></div>

Answer 1

我认为你不需要span元素。

<td>
    <span>
        <a>DELETE</a>
    </span>
</td>

你只需要将html作为

<td>
    <a>DELETE</a>
</td>

我发现您已将 td 元素设置为相对元素，因此您可以编写类似的CSS。

a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: red;
    padding: 5px;
}

你可能需要调整填充。

好的做法是使用class for delete按钮，并使用class来编写css。

Answer 2

您应该在新列（4）中添加删除按钮。

试试这个。

function createTable() {
    var table = "<table><tr><td>Name<span class='special'>▲</span></td><td>Age<span class='special'>▲</span></td><td style='border-right:0'>Sex</td><td></td></tr>";
  for(var i=0;i < array.length;i++){
        if (array.length > 0){
    table += "<tr><td>" + array[i].name + "</td>";
    table += "<td>" + array[i].age + "</td>";
    table += "<td style='border-right:0'>" + array[i].sex + "</td>";
    table += "<td align=center style='background-color:red'><span class='delete'><a><i class='fa fa-trash-o' aria-hidden='true'></i></a></span></td></tr>"; 
    }
  }
  table += "</table>";
  document.getElementById("tablePrint").innerHTML = table;
}

array = [{'name':'NAME', 'age':12, 'sex':'MAN'}, {'name':'NAME', 'age':22, 'sex':'WOMAN'}];

createTable();

删除表格问题内的按钮

2 个答案: