Question

我遇到一个问题，表格单元格中的按钮设置为两行。它没有填满第二行。如何让这个按钮填满两行？我试图按钮的样式以及表格单元格本身设置高度，但没有成功。请看我的代码如下： 1）按钮的css样式：

.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;
}

2）我的html表格如下：

<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

https://jsfiddle.net/k5wefqz5/1/

这是您的预期结果吗？

您错过了<table>代码来完成代码。

Answer 2

添加：

button {height:100%; }

在<table>中包装表格元素，以使<td>和<tr>按预期行事。

段

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>

Answer 3

在我看来，您应该使用css3 flexbox来实现此目的，如下所示：

.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>

表格单元格按钮问题

3 个答案:

段