A.A. PEACE A.A. PEACE - 23 days ago 7
CSS Question

table cell button issue

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>


Thank you very much

Answer

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>

Comments