代码之家 › 专栏 › 技术社区 › John MacIntyre

当我将child元素设置为“width:80%”,为什么<td>会收缩?

html-table css html

1

John MacIntyre · 技术社区 · 16 年前

我有一个表,当我将嵌套元素的样式设置为 宽度: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%吗?

2 回复 | 直到 8 年前

1

7

Paolo Bergantino 16 年前

你的问题是因为你正在设置 <input> 的宽度是没有宽度的单元格的百分比。因此,单元格变得越来越小,以弥补另一个单元格上的文本,一旦这样做了,输入将得到剩余内容的80%。

你的选择:
1)为 <输入& GT; 字段。
2)为 <td> .

发表评论: 删除样式时,它变大的原因是它将返回到浏览器的默认大小 <输入& GT; 元素,大于细胞中剩余物质的80%。

2

1

Ates Goral 16 年前

可以为第一列指定显式宽度:

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>