1

我有一个表格，当我将嵌套元素的样式设置为width:80%时，其中一个左列会缩小。该列缩小并截断输入元素的右边缘。您可以通过从输入元素中删除样式来了解我在说什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td>
                <input type="text" style="width: 80%;" />
            </td>
            <td>
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
            </td>
        </tr>
    </table>
</body>
</html>

我有一种感觉，这是因为列的大小是基于子级的，但是通过根据父级调整元素的大小，我创建了一个“catch 22”。

有人可以告诉我发生了什么，以及我如何保持相同的列宽，并将我的元素调整到其宽度的 80%？

4

2 回答 2

7

您遇到的问题是因为您将<input>' 的宽度设置为没有宽度的单元格的百分比。因此，单元格变得更小以弥补另一个单元格上的文本，一旦完成，输入将获得剩余内容的 80%。

您的选择：
1) 设置<input>字段的宽度（以像素为单位）。
2) 以像素/百分比为单位设置宽度<td>。

解决您的评论：当您删除样式时，它变大的原因是因为它会回到浏览器的默认<input>元素大小，该大小大于单元格中剩余内容的 80%。

于 2009-01-20T20:48:40.910 回答
1

你可以给第一列一个明确的宽度：

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>
于 2009-01-20T20:49:15.977 回答