Question

我试图将子元素添加到表格单元格中，我希望这些子元素尽可能宽，而不会溢出。我的问题是它们不会自动占据整个宽度，如果我将宽度设置为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％，边框折叠表）。我使用的是最新的Firefox浏览器。

Answer 1

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

DEMO：http://jsfiddle.net/kb9x06cg/

这是Paul Irish关于盒子大小的一篇很棒的文章：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

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

Answer 2

由于填充和边框，

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

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>

表格单元格 - 让孩子们获得全宽但不会溢出

2 个答案: