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:

Task 2

 Location

 Description

Für Oliver				

15.09.2018
												

												

[](/edit)

											

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