如何让不同字号的按钮完全填充表格单元格？

要让不同字号的按钮、下拉框完全填充表格单元格，核心是彻底重置表单元素的默认样式，并统一表格与表单元素的布局规则，以下是具体修改方案：

关键修改点 #

• 给所有元素添加box-sizing: border-box：确保宽高计算包含边框和内边距，避免元素超出单元格范围
• 重置表单元素的默认边框、内边距，移除浏览器自带的外观样式（比如按钮的圆角、下拉框的默认边框）
• 修正表格单元格的垂直对齐方式，避免基线对齐导致的底部空白
• 用flex布局保证表单元素内的文本居中，同时适配不同字号的内容

修改后的完整代码 #

<html>
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style type="text/css">
/* 全局统一盒模型，消除默认边距 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
}

tr, td {
  border: 2px solid;
}

td {
  padding: 0;
  /* 修正垂直对齐，避免基线对齐产生空白 */
  vertical-align: middle;
}

/* 重置表单元素样式，确保完全填充单元格 */
input[type="button"], select {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  /* 移除浏览器默认外观 */
  appearance: none;
  -webkit-appearance: none;
  /* 用flex布局保证文本居中，适配不同字号 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

/* 给下拉框添加自定义箭头（可选，避免移除默认样式后无箭头提示） */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 20px;
}
</style> 
</head> 
<body> 
  <table> 
    <tbody> 
      <tr> 
        <td> <select> <option>Lorem i</option> <option>Lorem i</option> </select> </td> 
        <td> <input type="button" value="abcdefghijklmno" style="font-size:150%"> </td> 
      </tr>
      <tr> 
        <td> <select style="font-size:200%"> <option>Lorem i</option> <option>Lorem i</option></select> </td> 
        <td> <input type="button" value="test"> </td> 
      </tr> 
    </tbody> 
  </table>  
</body>
</html>

方案说明 #

1. box-sizing: border-box：这是核心规则，不管元素设置了多少边框、内边距，都会被包含在指定的宽高内，不会超出单元格边界。
2. 表单样式重置：移除默认的border和padding，用appearance属性消除浏览器自带的按钮、下拉框样式，避免这些默认样式带来的额外空白。
3. flex居中布局：通过display: flex让按钮内的文本自动垂直水平居中，不管字号多大，都能保证内容对齐且按钮完全填充单元格。
4. 垂直对齐修正：给td设置vertical-align: middle，避免表单元素因基线对齐规则产生顶部或底部的空白间隙。

内容的提问来源于stack exchange，提问作者HifiJ