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

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

html-table css html

John MacIntyre · 技术社区 · 15 年前

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

Paolo Bergantino 15 年前

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

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

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

Ates Goral 15 年前

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

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

推荐文章

Mona Jalal · 在HTML中使用PHP显示表的内容

2 年前

free · 基于特定默认列对表进行排序

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

Bryan Santos · 固定表头与引导

2 年前

Muhammad Moosa Zubairy · 在div之后得到不需要的逗号

2 年前

buckshot · 使用CSS隐藏gridview中的某些列

2 年前

SeniorFluffie · 完整动态HTML表悬停事件不工作

6 年前

Smithy · 如何将此文本置于电子邮件模板中表格行的中心

6 年前

user7158897 · 如何基于地图区域单击显示/隐藏不同的表内容

6 年前

user9727941 · 不知道如何在空白td中插入这些数据

6 年前