css - 当 child 是 table 时，最小宽度不够强烈

Question

我之前的问题得到了 answer使用 min-width 设置包含 block 的宽度，但在其子项太大时允许它增长。

这对某些类型的 child 来说效果很好(简单的 div 有自己的 min-width 和 max-width 明确指定)。现在我正在研究一个更复杂的变体，其中的 child 是 table 。 (具有语义上有意义的行和列的合法表，而不是页面布局表。)

这些表格没有手动指定的min-width或max-width，但表格有一个固有的最大和最小宽度，对应于如果在任何单元格中没有换行符(最大)和插入所有可能的换行符(最小值)的换行符插入时表格将具有的宽度。

在我试图替换的现有页面布局中，最外层的容器是一个表格(糟糕的表格)，一行中只有一个单元格，CSS width (不是 min-width) 设置为首选宽度。当 children 是 table 时，他们会非常努力地适应容器的宽度。将使用换行符呈现一个宽表以使其适合，并且仅当插入所有换行符后子仍然不适合时容器才会展开。

换句话说，父级的width属性被视为最小值，但它也是一个强烈的首选宽度，其优先级高于子级的首选(即最大)宽度。

相比之下，当父级是带有 display:inline-block 和指定的 min-width 的普通 div 时，父级的 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="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>

Answer 1

我认为 .container {min-width: 400px;width: min-content;}，模供应商前缀，是你想要的。