Question

我们有一张桌子：

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

你可以看到它here(http://jsfiddle.net/PyPhk/)。

在Firefox中调整页面大小时，单元格保持40:20:40的比例。在Chrome中调整页面大小时，比率更改和textarea的单元格不会调整大小。当“白色空间：nowrap;”被删除，调整大小工作正常。

为什么Chrome在使用“white-space：nowrap”调整大小时不会保持比例？

Answer 1

看起来这是webkit特有的行为。似乎webkit没有完全使用textarea上用百分比指定的相对宽度，并且它使用从cols属性计算的像素值，以便在自动对齐表时传播到它的父级。默认cols为20.

您可以使用textarea的绝对宽度来覆盖cols中的计算值，或者您可以指定1的哑cols值。但是，最好的解决方案是在您的表上使用table-layout: fixed强制表格单元格使用表格单元格中的指定值，而不是尝试根据子元素进行计算。

在此处查看解决方案：http://jsfiddle.net/TbQYT/3/

Answer 2

我不确定它为什么会发生（我现在正在研究，如果我发现它为什么会这样，我会更新这个答案），但你可以通过使textarea成为{{{}来解决它。 1}}。

block

demo

Answer 3

我不确定为什么它在Chrome中不起作用，但您可以简单地覆盖textarea单元格上的样式，如下所示：

JSFiddle：http://jsfiddle.net/PyPhk/2/

HTML：

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;" class="textCell">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

CSS：

table tr td {
    white-space: nowrap;
}

.textCell {
    white-space: normal;
}

<强>更新

在检查原始小提琴后，您可以看到Chrome在其自己的样式表中提供了一些默认页面样式：user agent stylesheet

textarea包含的样式包括：

textarea {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

阻止您所需行为的风格是display: inline-block。不同之处在于其他浏览器（Firefox）未将此样式定义为默认样式。

因此，有效的修补程序会覆盖这个，因为@prison建议，尽管你认为这有缺点。

textarea{
     display: block;
}

你可以坚持我的工作来覆盖表格单元级别的样式，或者你可以专门为那个应用了display: block;的textarea定义一个类，这样你就会想到'缺点'适用于所有textareas。

Answer 4

我认为Chrome默认情况下Chrome的最小尺寸为textareas。即使使用内置的边角调整大小，它也不会低于某个高度和宽度。

表格单元格未在Google Chrome上正确调整大小

4 个答案: