当孩子是一张桌子时，min-width不够好 [英] min-width isn't preferred strongly enough when child is a table
问题描述
我上一个问题使用 min-width 得到了 answer ，
这对于某些种类的孩子很有效（简单的div有自己的 min-width 和 max-width ）。现在我在看一个更复杂的变化，其中的孩子们是表。 （具有语义上有意义的行和列而不是页面布局表的合法表。）
没有手动指定 min-width 或 max-width ，但表具有固有的最大和最小宽度，对应于表格在没有换行符
在现有的页面布局中，所有可能的换行符（最小值）我试图替换，最外面的容器是一个表（坏种类的表）与单个单元格在单一行，和CSS 宽度（不 min-width ）设置为首选宽度。当孩子们是桌子时，他们真的很难适应容器的宽度。宽表将使用换行符呈现，以使其适合，并且只有在插入所有换行符后，仍然不适合，容器才会展开。
换句话说，父元素的 width 属性被视为最小值，但它也是一个强烈的优先宽度，
相比之下，当父对象是一个带有的简单div：display：inline -block 和指定的 min-width ，父项的 min-width 首选。孩子喜欢更宽，所以父母扩展，即使孩子能够以更小的宽度渲染。
这里是一个片段，很像前面的问题，这演示了所有这一切。目标是使第二个容器像第一个容器一样以比使用 display：table 布局更为正确的方式。
（注意：这个问题的核心表格宽度对字体的选择非常敏感，我希望Courier New可以通过，并且每个人都看到相同的宽度在代码片段。）
var containers = document.querySelectorAll（。container）; for（var i = 0; i< containers.length; + i）{（function（）{var c = containers [i]，b = c.nextElementSibling; b.addEventListener（click，function（ev）{big = c.querySelector（。bigchild）; medium = c.querySelector（。mediumchild）; small = c.querySelector（。smallchild）; if（big.style.display！=block&& medium.style.display！=block& & small.style.display！=block）{big.style.display =block; } else if（big.style.display ==block）{big.style.display =none; medium.style.display =block; } else if（medium.style.display ==block）{medium.style.display =none; small.style.display =block; } else {small.style.display =none; }}）; }}（）;}
body {background-color： #ccc; text-align：center; font-size：14px; font-family：Courier New;} table {border-collapse：collapse;} td {border：1px solid black; padding：5px;}。container {background-color：white; min-height：250px; margin-left：auto; margin-right：auto;}。bigchild，.mediumchild，.smallchild {display：none;} button {display：block; margin：10px auto 20px;}＃container1 {display：table; width：400px;}＃container2 {display：inline-block; min-width：400px;}
< div class = containerid =container1> < table class =bigchild> < tr> < td>许多< / td> < td>栏< / td> < td> make this< / td> < td> a very< / td> < td> wide< / td> < td>表< / td> < td>不会< / td> < td> fit< / td> < td>即使使用< / td> < td>已添加< / td> < td>换行符< / td> < / tr> < / table> < table class =mediumchild> < tr> < td>此表< / td> < td>小于< / td> < td>和< / td> < td>适合< / td> < td>但< / td> < td>仅与< / td> < td>已添加< / td> < td>换行符< / td> < / tr> < / table> < table class =smallchild> < tr> < td>非常< / td> < td>小< / td> < / tr> < / table> < / div> < button>下一页< / button> < div class =containerid =container2> < table class =bigchild> < tr> < td>许多< / td> < td>栏< / td> < td> make this< / td> < td> a very< / td> < td> wide< / td> < td>表< / td> < td>不会< / td> < td> fit< / td> < td>即使使用< / td> < td>已添加< / td> < td>换行符< / td> < / tr> < / table> < table class =mediumchild> < tr> < td>此表< / td> < td>小于< / td> < td>与< / td> < td>适合< / td> < td>但< / td> < td>仅与< / td> < td>已添加< / td> < td>断行< / td> < / tr> < / table> < table class =smallchild> < tr> < td>非常< / td> < td>小< / td> < / tr> < / table> < / div> < button>下一页< / button>
我认为 .container {min-width：400px; width：min-content;} >
My previous question got an answer using min-width to set the width of a containing block but allow it to grow when its children are too big.
This worked fine with some kinds of children (simple divs with their own min-width and max-width specified explicitly). Now I'm looking at a more complex variation in which the children are tables. (Legitimate tables with semantically meaningful rows and columns, not page-layout tables.)
There is no manually-specified min-width or max-width on these tables, but tables have an inherent maximum and minimum width, corresponding to the width that the table would have if rendered with no line breaks in any of the cells (maximum) and the width that it would have with line breaks inserted insertion of all possible line breaks (minimum).
In the existing page layout which I'm trying to replace, the outermost container is a table (the bad kind of table) with a single cell in a single row, and a CSS width (not min-width) set to the preferred width. When the children are tables, they try really hard to fit into the container's width. A wide table will be rendered with line breaks to make it fit, and the container will expand only if the child still doesn't fit after all line breaks are inserted.
In other words, the parent's width property is treated as a minimum, but it is also a strongly preferred width, which has a higher priority than the child's preferred (i.e. maximum) width.
By contrast, when the parent is a plain div with display:inline-block and a specified min-width, the parent's min-width is not strongly preferred. The child prefers to be wider, so the parent expands, even if the child is capable of being rendered with a smaller width.
Here's a snippet, much like the one in the previous question, which demonstrates all of this. The goal is to make the second container act like the first one in some way that is more "proper" than using display:table for layout.
(Note: the table widths at the heart of this question are very sensitive to choice of font. I hope the Courier New comes through and everybody sees the same widths in the snippet.)
var containers = document.querySelectorAll(".container");
for(var i = 0; i < containers.length; ++i) {
(function() {
var c = containers[i],
b = c.nextElementSibling;
b.addEventListener("click", function(ev) {
big = c.querySelector(".bigchild");
medium = c.querySelector(".mediumchild");
small = c.querySelector(".smallchild");
if(big.style.display != "block" &&
medium.style.display != "block" &&
small.style.display != "block") {
big.style.display = "block";
} else if(big.style.display == "block") {
big.style.display = "none";
medium.style.display = "block";
} else if(medium.style.display == "block") {
medium.style.display = "none";
small.style.display = "block";
} else {
small.style.display = "none";
}
});
})();
}
body {
background-color: #ccc;
text-align: center;
font-size: 14px;
font-family: "Courier New";
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.container {
background-color: white;
min-height: 250px;
margin-left: auto;
margin-right: auto;
}
.bigchild, .mediumchild, .smallchild {
display: none;
}
button {
display: block;
margin: 10px auto 20px;
}
#container1 {
display: table;
width: 400px;
}
#container2 {
display: inline-block;
min-width: 400px;
}
<div class="container" id="container1">
<table class="bigchild">
<tr>
<td>Lots of</td>
<td>columns</td>
<td>make this</td>
<td>a very</td>
<td>wide</td>
<td>table</td>
<td>that won't</td>
<td>fit</td>
<td>even with</td>
<td>added</td>
<td>line breaks</td>
</tr>
</table>
<table class="mediumchild">
<tr>
<td>This table</td>
<td>is smaller</td>
<td>and</td>
<td>it fits</td>
<td>but</td>
<td>only with</td>
<td>added</td>
<td>line breaks</td>
</tr>
</table>
<table class="smallchild">
<tr>
<td>very</td>
<td>small</td>
</tr>
</table>
</div>
<button>Next</button>
<div class="container" id="container2">
<table class="bigchild">
<tr>
<td>Lots of</td>
<td>columns</td>
<td>make this</td>
<td>a very</td>
<td>wide</td>
<td>table</td>
<td>that won't</td>
<td>fit</td>
<td>even with</td>
<td>added</td>
<td>line breaks</td>
</tr>
</table>
<table class="mediumchild">
<tr>
<td>This table</td>
<td>is smaller</td>
<td>and</td>
<td>it fits</td>
<td>but</td>
<td>only with</td>
<td>added</td>
<td>line breaks</td>
</tr>
</table>
<table class="smallchild">
<tr>
<td>very</td>
<td>small</td>
</tr>
</table>
</div>
<button>Next</button>
I think .container {min-width: 400px;width: min-content;}, modulo vendor prefixes, is what you want.
这篇关于当孩子是一张桌子时，min-width不够好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
