Question

<div id="scadenta" style="width:191px; overflow:hidden; border:1; height:90px;">
    <table style="width:100%;">
        <tr>
            <td style="width:40%;"><input type="text"></input></td>
            <td style="width:20%;"><input type="text"></input></td>
            <td style="width:40%;"><input type="text"></input></td>
        </tr>
    </table>
</div>

这是我用于其中一个表的测试布局。它应该有两个大柱子拥抱一个较小的一个。问题是tr和td尺寸不起作用。我得到的所有TD都大小相同，几乎和整个桌子一样大。我的代码是否存在根本性的问题，或者其他什么原因导致它的行为如此？

Answer 1

没有错......你的风格很好。他们的问题在于，您将表格宽度设置为100％并且为191px并且您正在溢出表格。这一切都是矛盾的。重新开始，删除宽度和样式，并在td周围设置边框，这将显示它们将采用正确的宽度。

Answer 2

<input type="text"></input>完全错了。要么<input type="text" />，要么<input type="text">。

另一个问题是输入字段的默认宽度。您只提供整体宽度为191px，但一个输入字段几乎填充该宽度。因此，将输入字段放入191px的20％只会扩展td以使其适合。

Answer 3

你必须为你的输入设置一个宽度，否则它们会被设置为浏览器的默认大小。在输入上设置style="width:90%;"时查看this jsfiddle-example（由于默认填充，使用100％会使输入大于td - 请参阅box-model有关此的更多信息）。

请注意，我还删除了结束</input> - 标记并将它们设为空元素（<input ... />），就像它应该的那样（但这与您的问题无关）。

Answer 4

input标记具有浏览器应用的设置最小宽度，您可以增加div的大小或将输入类型大小声明为100％。

input {
   width:100%;
}

Answer 5

从<input type="text"></input>更改到<input type="text" />

我的td尺寸有什么问题？

5 个答案: