html - 禁止 CSS 表格比外部容器宽

Question

我需要制作三列标题。左列和右列应该使用他们需要的所有空间，中央应该使用所有左边的空间。

我决定为此使用 CSS 表格(因为我需要支持 IE8)。当中心栏中的内容不多时，它工作正常:

.outercontainer {
  width: 500px;
}
.container {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.left {
  display: table-cell;
  width: auto;
  background: green;
  white-space: nowrap;
}
.center {
  display: table-cell;
  width: 100%;
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
}
.right {
  display: table-cell;
  width: auto;
  background: red;
  white-space: nowrap;
}

<div class="outercontainer">
  <div class="container">
    <div class="row">
      <div class="left">
         Left content
      </div>
      <div class="center">
        Center content
      </div>
      <div class="right">
        Right content
      </div>
    </div>
  </div>
</div>

但是当内容多的时候，inner table会变得比outer container宽:

.outercontainer {
  width: 500px;
}
.container {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.left {
  display: table-cell;
  width: auto;
  background: green;
  white-space: nowrap;
}
.center {
  display: table-cell;
  width: 100%;
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
}
.right {
  display: table-cell;
  width: auto;
  background: red;
  white-space: nowrap;
}

<div class="outercontainer">
  <div class="container">
    <div class="row">
      <div class="left">
         Left content
      </div>
      <div class="center">
        Center content is very long is very long is very long is very long is very long is very long is very long is very long is very long is very long is very long
      </div>
      <div class="right">
        Right content
      </div>
    </div>
  </div>
</div>

如何禁止外容器溢出并强制表格不变宽？

Answer 1

在您的 CSS 中正确拼写“container”并从中心 css 中删除“width: 100%”

.outercontainer {
  width: 500px;
}
.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.row {
  display: table-row;
}
.left {
  display: table-cell;
  width: auto;
  background: green;
  white-space: nowrap;
}
.center {
  display: table-cell;
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
}
.right {
  display: table-cell;
  width: auto;
  background: red;
  white-space: nowrap;
}

<div class="outercontainer">
  <div class="container">
    <div class="row">
      <div class="left">
         Left content
      </div>
      <div class="center">
        Center content is very long is very long is very long is very long is very long is very long is very long is very long is very long is very long is very long
      </div>
      <div class="right">
        Right content
      </div>
    </div>
  </div>
</div>