Table cell button issue - html

Question

I am facing an issue with a button set in a table cell which covers two rows. it does not fill the second row. how can i make this button fill both rows? I have tried to set height in the style of the button as well as on the table cell itself without success. Please see my code is below:
1) the css style of the button:
.button {
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
width: 100%;
vertical-align: middle;
}
And 2) my html table below:
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>

Answer 1

In my opinion you should use css3 flexbox to achieve this as shown below:
.btn-holder {
display: flex;
}
.btn-holder .btn-holder {
flex-direction: column;
}
.button {
margin: 0 5px 5px 0;
padding: 5px 15px;
font-size: 1.1em;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 1px;
box-shadow: 0 2px #999;
}
<div class="btn-holder">
<button class="button" id="cancel_order">Aκύρωση</button>
<div class="btn-holder">
<button class="button">Εκτύπωση</button>
<button class="button">Παραγγελία</button>
</div>
<button class="button">Απόδειξη</button>
</div>

Answer 2

https://jsfiddle.net/k5wefqz5/1/
Is this your expected result ?
You miss <table> tag to complete your code.

Answer 3

Add this:
button {height:100%; }
Wrap table elements inside a <table> in order to get <td> and <tr> to behave as expected.
SNIPPET
table {
border: 1px solid red;
}
td {
border: 1px solid black;
}
button {
height: 100%;
}
<table>
<tr>
<td rowspan="2">
<button href="#0" class="button" id="cancel_order">Aκύρωση</button>
</td>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Εκτύπωση</button>
</td>
<td rowspan="2">
<button class="button">Παραγγελία</button>
</td>
</tr>
<tr>
<td style="padding-right:5px; padding-left:5px;" colspan="2">
<button class="button">Απόδειξη</button>
</td>
</tr>
</table>