表问题内的删除按钮答案

【问题标题】：Delete Button Inside of Table Issue表问题内的删除按钮
【发布时间】：2017-05-19 12:39:12
【问题描述】：

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

用cmets在Javascript和CSS中指出了问题区域！这就是现在的样子（你可以看出，删除符号不在垂直中心）：

这就是我想要的样子（photoshopped）：

代码：

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>

【问题讨论】：

标签： css html html-table row

【解决方案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;
}

您可能需要调整填充。

好的做法是使用类来删除按钮，使用类来编写css。

【讨论】：

在其当前形式中，这将使页面中的所有链接飞到其最近的父级的顶部，并带有一组position，而不是static。唯一可行的方法是，如果所有页面中都没有其他链接。
是的，这就是为什么我建议他使用类而不是仅仅使用标签名称来应用 css。 :)

【解决方案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();

【讨论】：