Question

我的行包括最后一列中的按钮：
http://i.hizliresim.com/vg7qL4.png

我想让按钮完全填满td。我尝试宽度：100％和高度：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;
}

在这里试试小提琴

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

在这里编辑答案：

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

Answer 2

宽度和高度均为100％的按钮将填充<td>元素的宽度，但不会填充该元素的高度。此问题的首选解决方案是简单地使<td> 100％的高度。 e.g。

 <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

2 个答案: