表格单元格按钮问题答案

【问题标题】：Table cell button issue表格单元格按钮问题
【发布时间】：2017-03-25 09:59:58
【问题描述】：

我遇到了一个问题，即在覆盖两行的表格单元格中设置了一个按钮。它没有填满第二行。我怎样才能让这个按钮填满两行？我试图在按钮的样式以及表格单元格本身上设置高度，但没有成功。请看我的代码如下： 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>

【问题讨论】：

这里看不到问题。还有其他人吗？
你能解释一下你想要什么吗？
我在4个浏览器中检查过，结果都是一样的
是的，让我给你看一下结果的截图
我不知道如何添加屏幕截图，所以让我用点来演示一下：)

标签： html css button html-table

【解决方案1】：

添加这个：

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>

【讨论】：

@A.A.PEACE 将你的 td 和 tr 包裹在 <table></table> 中，你看过片段了吗？

【解决方案2】：

在我看来，您应该使用 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>

【讨论】：

我有标签，但我没有粘贴这段代码，因为表格很大

@A.A.PEACE 是的，我知道，但我认为它比使用表格更好。

@A.A.PEACE 我试过用桌子修复它，但没有运气。

你是TOP。我已将您的 div 部分插入我的表格中的表格行中，它就像一个魅力

@A.A.PEACE 请注意IE9及更早的IE版本以及部分老浏览器不支持flexbox模态。

【解决方案3】：

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

这是您的预期结果吗？

你错过了<table>标签来完成你的代码。

【讨论】：

我有标签，但我没有粘贴这段代码，因为表格非常大......无论如何，谢谢。用下面解决了