Photoshop Question posted in
The official user guide can be found here.

Delete Button Inside of Table Issue – Photoshop

I have created a table and want to give users the option to delete a certain row but I can’t center the delete sign vertically inside of the rows.At the moment,the delete sign won’t move from the bottom of the table row ,and I don’t know how to fix this problem so any help is appreciated!

The problem areas are indicated in the Javascript and CSS with comments!This is what it looks like now(As you can tell,the delete sign is not in the center vertically):

enter image description here

This is what I want it to look like(photoshopped) :

enter image description here

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

2

Answers


  1. 0

    I don’t think you need span element there.

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

    you can instead just have html as 

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

    I see that you have set td element as relative so, you can write your css like.

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

    you might have to adjust the padding.

    Good practice can be using class for delete button, and using class to write the css.

    Login or Signup to reply.
  2. 0

    You should put delete button in new column(4).

    Try this.

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search