Question

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

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特性来强制换行

Answer 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>

min-width不适用于table-layout：fixed

1 个答案: