我的 HTML 布局需要一些帮助。
我正在尝试制作一个简单的计算器数字键盘。
我希望我的“=”按钮更大一些，所以我使用了 rowspan 将它拉伸(stretch)成两行。
但是，(在 Chrome 中)这似乎使我的最后两行比前两行大。
我尝试将单元格填充/间距设置为零，但我得到了相同的效果。
更新: 由于还没有人回答...
我一直在阅读，看起来大家一致同意不使用 table 进行布局。那么，您应该使用什么？我找到了很多解释为什么表格如此糟糕的 Material ，但很少有关于如何在没有它们的情况下制作表格/网格布局的资料。使用 table 以外的东西来做这件事会更好吗？
/更新
这是 HTML(我打算稍后应用 CSS):
<html>
<div>
<table width="200" height="300" border="0" style="table-layout:fixed">
<tr>
<td colspan="4"><input type="text" style="width:100%; text-align:right" value="0" readonly /></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="7" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="8" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="9" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="-" /></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="4" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="5" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="6" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="+" /></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="1" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="2" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="3" /></td>
<td colspan="1" rowspan="2"><input type="button" style="width:100%;height:100%" value="=" /></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="+/-" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="0" /></td>
<td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="." /></td>
<!-- ROWSPAN -->
</tr>
</table>
</div>
</html>
按钮大小在 FireFox 上看起来不错。 顺便说一句:有人知道为什么 IE9 会将按钮扭曲成奇怪的大小吗？
这是一张图片，看到下面两行稍微大一点:
最佳答案
方法太复杂了。最好设置 input 元素(按钮)的大小，让浏览器相应地分配单元格的大小。下面的样式表说明了一种更简单的方法。它看起来有点复杂，因为它必须覆盖您现在在 HTML 属性中的一些设置。通常最好在外部样式表或至少在 style 元素中进行一致的样式设置。如果简化标记，也可以减少样式表。
table, td { height: auto !important; width: auto !important; }
td { width: 2em; height: 2em; padding: 0;}
input { padding: 0; font-size: 100%;
width: 2em !important; height: 2em !important; }
td[rowspan="2"] input { height: 4em !important; }
td[colspan="4"] input { width: 8em !important; }
关于HTML:跨越时统一单元格大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21471495/