如何使按钮完全填充 td？

Question

我的行在最后一列中包含一个按钮：

我想让一个按钮完全填满 td。我同时尝试了 width: 100% 和 height: 100%，但没有用。这是我的代码：

<td>
    <input type='button' style='width:100%; height:100%;' value='Delete' onclick='deleteRow(\"{$rec['memberID']}\")'/>
</td>

为什么它不起作用，我怎样才能让它起作用？

Answer 1

这应该有效：

<td><input class='myclass' type='button' value='Delete'/></td>

CSS代码：

 .myclass{
    display:inline-block;
    width: 80px;
    height: 40px;
}

在此处尝试 fiddle

http://jsfiddle.net/4r5roc2L/3/

在此处编辑答案：

http://jsfiddle.net/4r5roc2L/4/

Answer 2

这是一个想法。

由于当按钮直接位于 td 中时 height:100% 的行为显然很奇怪，但当它是 div 中的按钮或 td 中的 div 时则不然，让我们结合这两个：

http://jsfiddle.net/y3zom5m4/2/

<table cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 100px; height: 50px; border: 1px solid black;">
            <div style="width: 100%; height: 100%;">
                <input type="button" style="width: 100%; height: 100%;" value="Button in a div in a td"/>
            </div>
        </td>
    </tr>
</table>

不是最优雅的解决方案，但它有效！

Answer 3

宽度和高度为 100% 的按钮将填充 <td> 元素的宽度，但不会填充该元素的高度。此问题的首选解决方案是将 <td> 的高度也设置为 100%。例如

 <tr>
      <td><button class="btn" id="1">1</button></td>
      <td><button class="btn" id="2">2</button></td>
      <td><button class="btn" id="3">3</button></td>
      <td><button class="btn" id="plus">+</button></td>
      <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
    </tr>

CSS:

td{
    height: 100%;
}
.btn {
    width: 100%;
    height: 100%;
}

那应该没问题

如何使按钮完全填充 td？

How do I make a button fill in a td completely?

html

css

html-table

button