如何使按钮完全填充td？

Question

我有一些包括最后一列按钮的行:

_{(来源: hizliresim.com)}

我想让一个按钮完全填充一个 td。我试过同时使用 width: 100% 和 height: 100%，但它没有起作用。这是我的代码:

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

为什么它不能工作，如何使它工作？

- user4255838

---

这是你的HTML的一部分。你添加了任何样式吗？那么请提供代码。 - Anjula Ranasinghe

有内联样式。 - Roope

你使用了 display: inline-block 吗？ - kyle k

一个td不是有默认的填充吗？ - jlowcs

我必须同意jlowcs的观点。TD元素应用了Cellpadding或某些填充。因此这是一个XY问题。 - Roko C. Buljan

在 td 容器中，按钮的行为确实很奇怪：http://jsfiddle.net/y3zom5m4/1/ - jlowcs

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/

- Inzamam Tahir

---

我需要将宽度和高度都设置为100%，但是当我这样做时，它没有起作用。 - user4255838

好的，如果“%”无法使用，您可以使用“px”手动设置宽度和高度，不过我已经更新了我的答案。请看一下并告诉我是否符合您的要求。 - Inzamam Tahir

Answer 2

这里有一个想法。

既然当一个按钮直接在 td 中时，height:100%的行为明显很奇怪，但是当它是在 div 中的按钮或者 div 在 td 中时就不会出现这个问题，那么我们将这两种情况结合起来:

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>

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

- jlowcs

---

如果您不需要显式设置 td 元素的宽度，只需在 td 上设置 height: 100% 而不是添加一个 div 也可以。 - Stijn Van Bael

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

那应该可以正常工作

- Pila