表格单元格 - 让孩子占据全宽但不溢出答案

【问题标题】：Tables cells - make children take full width but not overflow表格单元格 - 让孩子占据全宽但不溢出
【发布时间】：2014-10-07 19:38:41
【问题描述】：

我正在尝试将子元素添加到表格单元格中，我希望子元素尽可能宽而不会溢出。我的问题是它们不会自动占据整个宽度，如果我将宽度设置为 100%，它们就会溢出。

我不想简单地隐藏溢出，因为将来我想在孩子周围设置边框。
由于未提及的原因，Javascript 是一个不受欢迎的解决方案；但如果它有效，它就会有效。

这是我的测试：

<table style="background:grey;width:500px">
    <tr>
        <td>
            <input value="Hello World"></input>
        </td>
    </tr>
    <tr>
        <td>
            <input style="width:100%" value="Hello World"></input>            
        </td>
    </tr>
</table>

我已经尝试了其他人发布的一些东西（例如使输入显示为内联块，使单元格宽度为 100%，边框折叠表格）。我用的是最新的火狐浏览器。

【问题讨论】：

标签： html css

【解决方案1】：

将box-sizing: border-box; 添加到输入元素CSS。

演示：http://jsfiddle.net/kb9x06cg/

这是 Paul Irish 撰写的一篇关于 box-sizing 的精彩文章：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

这里是 MDN 关于这个主题的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

【讨论】：

无法决定接受谁，MDN 赢得了我 :) 好东西。

【解决方案2】：

input 字段由于填充和边框而具有额外的宽度。如果您应用box-sizing: border-box，您将得到计算宽度为 100% 而不是 100%+padding+border。

table {
  background-color: gray;
  width: 500px;
}
table input {
  box-sizing: border-box;
  width: 100%;
}

<table>
    <tr>
        <td>
            <input value="Hello World"></input>
        </td>
    </tr>
    <tr>
        <td>
            <input value="Hello World"></input>            
        </td>
    </tr>
</table>

【讨论】：