min-width 不适用于 table-layout:fixed答案

【问题标题】：min-width doesn't work with table-layout:fixedmin-width 不适用于 table-layout:fixed
【发布时间】：2016-06-18 06:31:24
【问题描述】：

我尝试在具有“table-layout:fixed”特征的 td 表上使用 min-width，但它不起作用：

https://jsfiddle.net/c1qje0us/

HTML：

<BODY>
  <TABLE>
    <TR>
      <TD class='test'>test</TD>
      <TD>blablablablablablablablablablablablablablabla</TD>
    </TR>
  </TABLE>
</BODY>

CSS：

table{
  width:100%;
  table-layout:fixed;
  word-wrap:break-word;
}
.test{
  width: 25%;
  min-width: 100px;
}

有人想这样做吗？

PS : 当窗口的宽度很小时，我需要表格布局 CSS 特性来强制换行

【问题讨论】：

表格布局：固定；将应用宽度：25%；无论是在哪里设置了最大或最小宽度。
具有固定布局的所有单元格都具有固定宽度，因此不能有与此不同的最小或最大宽度，因为这样您就会有一个单元格同时具有两个不同的宽度时间。
你只需要并排设置 2 个容器吗？因为这里有其他方法可以获得所需的输出
是的，我明白为什么 min-width 不起作用，但我不知道如何更改我的代码来做我想做的事情（宽度：25%，min-width:100px 和强制行即使字符串没有空格也要打断。不，我需要两个以上的容器并排，这只是一个小电话来说明我的问题。
看看 display:flex，使用宽度和 min-max-width 的单元格 taht 需要控制和 flex:1；对于需要填充剩余空间的单元格。 ..请注意，表格布局将被破坏，请参阅下面的更新答案；）

标签： html css

【解决方案1】：

如果要并排设置 2 个盒子，flex 会为您完成这项工作。

（添加了一些 CSS 来打断你的话）

.fixedRow {
  display: flex;
  max-width: 100%;
background:linear-gradient(to right, gray 220px, lightgray 220px); /* check min-width of first-cell */
}
div {
  box-shadow:0 0 0 1px red;
  -ms-word-break: break-all;
  word-break: break-all;
  // Non standard for webkit
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

}
.test {
  width: 25%;
  min-width: 220px;
}
.liquid {
  flex: 1;

<div class="fixedRow">
  <div class="test">
    Test
  </div>
  <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla
  </div>
</div>

3 个盒子和 2 行的示例：

.fixedRow {
  display: flex;
  max-width: 100%;
background:
  linear-gradient(to right, gray 220px, transparent 220px),
  linear-gradient(to left, gray 220px, transparent 220px ) lightgray; /* check min-width of first-cell */
}
div {
  box-shadow:0 0 0 1px red;
  -ms-word-break: break-all;
  word-break: break-all;
  // Non standard for webkit
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

}
.test {
  width: 25%;
  min-width: 220px;
}
.liquid {
  flex: 1;

<div class="fixedRow">
  <div class="test">
    Test
  </div>
  <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla
  </div>
  <div class="test">
    Test me in full page
  </div>
</div>
<div class="fixedRow">
  <div class="test">
    Test
  </div>
  <div class="liquid">blablablablablablablablablablablaablablablablaablablablablaablablablablablablablabla
  </div>
  <div class="test">
    Test
  </div>
</div>

【讨论】：