防止表格单元格增加其宽度以包含宽内容答案

【问题标题】：Prevent table-cell from increasing its width to encompass wide content防止表格单元格增加其宽度以包含宽内容
【发布时间】：2015-12-14 22:54:31
【问题描述】：

这就是我要说的：

var els = document.getElementsByClassName("stuff");
for (var i = 0; i < 20; ++i) {
  for (var j = 0; j < 2; ++j) {
    var el = document.createElement("div");
    el.innerHTML = i;
    els[j].appendChild(el);
  }
}

.maintable {
  width: 300px;
}
.maincell1,
.maincell2 {
  background-color: red;
  width: 50%;
  height: 100px;
}
.maincell2 {
  background-color: blue;
}
.stuff {
  display: flex;
  flex-wrap: nowrap;
  background-color: green;
  overflow: scroll;
}
.stuff div {
  width: 30px;
  height: 30px;
  border: 1px solid black;
}
#fixtable {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

<table class="maintable">
  <tr>
    <td class="maincell1">
      <div class="stuff"></div>
    </td>
    <td class="maincell2"></td>
  </tr>
</table>
<br>
<table class="maintable">
  <tr>
    <td class="maincell1">
      <table id="fixtable">
        <tr>
          <td>
            <div class="stuff"></div>
          </td>
        </tr>
      </table>
    </td>
    <td class="maincell2"></td>
  </tr>
</table>

正如您在 sn-p 中看到的那样，第一个 flex div 将其所在单元格的 50% 宽度伸展开来。我知道我可以固定主表格布局，但我希望另一列的自动增长功能.

为了限制该特定单元格中的自动增长，在第二个表格中，我将另一个固定表格包裹在 flex div 周围，它可以按照我需要的方式工作。

我的问题是 - 有没有更优雅的方式来做到这一点？因为这相当笨重......

【问题讨论】：

标签： html css css-tables

【解决方案1】：

您可以将 flex 容器从流中取出，而不是嵌套表：

.maincell1, .maincell2 {
  position: relative;
}
.stuff.fix {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

这样单元格内的内容不会影响其宽度。

请注意，规范未定义自动表格布局，因此结果可能不完全可靠。重新考虑使用固定布局可能是个好主意。

var els = document.getElementsByClassName("stuff");
for (var i = 0; i < 20; ++i) {
  for (var j = 0; j < 2; ++j) {
    var el = document.createElement("div");
    el.innerHTML = i;
    els[j].appendChild(el);
  }
}

.maintable {
  width: 300px;
}
.maincell1,
.maincell2 {
  background-color: red;
  width: 50%;
  height: 100px;
  position: relative;
}
.maincell2 {
  background-color: blue;
}
.stuff {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
  width: 100%;
}
.stuff div {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  background-color: green;
}
.stuff.fix {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
}

<table class="maintable">
  <tr>
    <td class="maincell1">
      <div class="stuff"></div>
    </td>
    <td class="maincell2"></td>
  </tr>
</table>
<br>
<table class="maintable">
  <tr>
    <td class="maincell1">
      <div class="stuff fix"></div>
    </td>
    <td class="maincell2"></td>
  </tr>
</table>

【讨论】：