td box with background color and fixed width

Hi everybody,

I have a table with multiple rows. In the last td of every row I would like to offer the user an "edit-button".
Please have a look at the picture so see what I mean.

My requirements seems simple:

• td has a fixed with of 50px
• td should have a green background-color
• inside the td there should be only a centered icon (<i class=icon-cogs>)
• the height depends of the other content

Here is the code I currently use:

<table class="table table-striped topmargin-sm nowrap datatable dataTable no-footer">
<tr id="task-row-128">

<td><i class="icon-star" style="padding-left: 10px;"></i></td>

<td><div class="toggle"><div class="togglet"><i class="toggle-closed icon-angle-up"></i><i class="toggle-open icon-angle-down"></i>
<p>Task 2</p></div>
<div class="togglec" style="white-space: pre-line;"><i class="icon-map-marker"></i> Location

<i class="icon-pencil"></i> Description
</div>
</div>
</td>

<td><span class="label">Für Oliver</span></td>				

<td>15.09.2018</td>
												
<td><input class="bt-switch" type="checkbox" onchange="setTaskDone('128')" /></td>
												
<td class="col-last edit-box">
<a href="/edit" class="button button-green nomargin edit-box"><i class="icon-cogs"></i></a>
</td>
											
</tr>

The css code is simple:

td.edit-box {
	padding: 0px !important; 
	display: table-cell; 
	background-color: #5E994A; 
	height: 100%; 
	width: 50px;
}
a.edit-box {
	display: block; min-height: 100%; height: auto !important; height: 100%; font-size: 20px; text-align: center;
}
a.edit-box:hover{
	background-color: #323231;
}

In Google Chrome everything works as expected. In Firefox or other browsers I have mainly three problems:

• the background-color does not goes over the complete (dynamic) height. I can not define a fixed height but height: 100% is ignored
• consequently the icon of the box is not centered. It is centered horizontaly but not vertically. The icon has a position on the top of the box and is not centered
• in firefox if I put the mouse over a tablerow the green background-color disapers and is overlayed with the grey from the tr-hover of the striped table. This is only in firefox.

Do you have any hints or tipps for me?

Best regards
Christoph