Question

讨厌问，因为已经有一堆看似相关的答案，但我找不到这个确切的组合。

我有一个包含textarea的表，textarea有一个很大的cols属性，但是即使应用了max-width，textarea也会破坏它的约束。

当容器是div时，这是一个有效的解决方案： https://codepen.io/davewallace/pen/zwwRoN

.container {
    border:2px solid orange;
    width: 200px;
    padding: 10px; // added for clarity
}
.sub-container {
    padding: 10px; // added for clarity
    border:1px solid green;
}
textarea {
    max-width: 100%; // correctly constrained within the container's width
    border:1px dashed red;
}

<div class="container">
    <div class="sub-container">
        <textarea cols="80" rows="20" placeholder="Please don't outgrow the container!"></textarea>
    </div>
</div>

这是相同的设置，但容器是一个表（＆gt; tr＆gt; td）： https://codepen.io/davewallace/pen/EmmQNW

<div class="container">
    <table class="sub-container">
        <tr>
            <td>
                <textarea cols="80" rows="20" placeholder="Please don't outgrow the container!"></textarea>
            </td>
        </tr>
    </table>
</div>

.container {
    border:2px solid orange;
    width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
    padding: 10px; // added for clarity
}
.sub-container {
    border: 1px solid green;
}
textarea {
    max-width: 100%; // should limit the default width provided by cols?
    margin: 10px; // added for clarity
    border:1px dashed red;
}

通过在表格约束的textarea上指定width: 100%以及max-width，然后应用约束。我想避免明确添加宽度规则。

所以我的问题是，是否有一个优雅的解决方案，我不必提供明确的宽度规则，这将允许子textarea尊重容器宽度？

请注意：我正在处理遗留代码，因此替换表格不是我能立即考虑的解决方案。

最初我想知道是否从textarea中删除cols属性可能适合，但这似乎不是最佳解决方案，而且还需要我深入研究不应该（还）的遗留代码触摸。

Answer 1

你知道table-layout: fixed是什么解决方案

<div class="container">
    <table class="sub-container">
        <tr>
            <td class="padding-10">
                <textarea  cols="" rows="20" placeholder="Please don't outgrow the container!"></textarea>
            </td>
        </tr>
    </table>
</div>

.container {
    border:2px solid orange;
    width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
    padding: 10px; // added for clarity
}
.sub-container {
    border: 1px solid green;
    table-layout: fixed;
    width: 100%;
}
textarea {
    max-width: 100%; // should limit the default width provided by cols?
    margin: 0; // added for clarity
    border:1px dashed red;
    resize: vertical; // resize only vertical
    width: 96%; // width hack for ur solution
}
.padding-10{
    padding: 10px;
}

我在css中做了一些更改，并从textarea重置了cols

更新了codepen https://languagetool.org/http-api/swagger-ui/#!/default/post_check

在表

1 个答案: