html, css, hiding bordes of a table column but keeping the content

Question

I'm trying to make a table which is currently looks like this:

I would like to hide the blocks where the buttons are placed but I couldn't find solution for it. My html code looks like this:

<table>
    <thead>
        <th>Worknumber</th>
        <th>Description</th>
        <th>Date</th>
    </thead>
    <tbody> 
        {{#falseRow}}
        <tr> 
            <td>{{this.workNumber}}</td>
            <td>{{this.shortNote}}</td>
            <td>{{this.timeStamp}}</td>
            <td>
                <div class="makeItDone">
                    <form action="/list/{{this.id}}" method="get"> 
                        <button type="submit" class="material-icons">done</button> 
                    </form>
                </div> 
            </td>
            <td>
                <div class="upDateRecord">
                    <form action="/edit/{{this.id}}" method="get">
                        <button type="submit" class="material-icons">view_list</button> 
                    </form>
                </div>
            </td>
        </tr>
        {{/falseRow}} 
    </tbody> 
</table>

css:

body {
    font-family: Arial;
    background: url(.jpg) no-repeat center center fixed;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
table {
    margin: auto;
    position: relative;

}
th, td {
    padding: 5px;
    border: 1px solid black;
}
th {
    background: #c3c5c9;
}
tr {
    background: #c3c5c9;
}
tr:nth-child(odd) {
    background: #eee;
}
td {
    color:#000;
    text-align: center;
    font-size: 16px;
}
button {
    border-radius: 8px;
    background: black;
    padding: 8px 12px 8px 12px;
    border-style: outset;
    border-width: 2px;
    border-color: grey;
    color: white;
}
button:hover{
    background: black;
    color: red;
}
button:active {
    background: black;
    padding: 8px 13px 8px 13px;
    border-radius: 8px;
    border-style: inset;
    border-width: 2px;
    border-color: grey;
    color: red;
}

I did try { display:none; } at the button's td but it dismiss the entire block. I'm just wondering if there is any way to make the border and the background of this block invisible somehow but keeping the button in the current form and place. Maybe this design is wrong and this isn't the way to line up the buttons with the row, I'm not sure :(

Answer 1

Set the cell colors on the td along with the border and add a class to remove it.

th,
td {
  border: 1px solid black;
  background-color: red;
  width: 100px;
}

td {
  background-color: green;
}

td.clean {
  border: 0;
  background-color: transparent;
}

div {
  background-color: yellow;
}

<div>
  <table>
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td class="clean">4</td>
        <td class="clean">5</td>
      </tr>
    </tbody>
  </table>
  <div>