禁止CSS表格比外部容器宽

Question

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

我决定使用CSS表格（因为我需要支持IE8）。当中心栏中的内容不多时，它可以正常工作：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是当内容很多时，内部表比外部容器更宽：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何禁止溢出的外部容器和强制表不会变宽？

Answer 1

拼写＆＃34;容器＆＃34;正确地在你的CSS中删除＆＃34;宽度：100％＆＃34;来自中心css

＆＃13;

＆＃13;

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

＆＃13;

vidID

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你真正想要的是使用flex。你说你想要左右使用尽可能多，并让中间的一个占用剩余的宽度？这很容易弯曲。你可以查看这个小提琴：https://jsfiddle.net/wv3ck9ax/1/

.outercontainer {
  width: 500px;
}
.container {
  display: flex;
  width: 100%;
}
.left {
  flex-shrink: 0;
  background: green;
  white-space: nowrap;
}
.center {
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
}
.right {
  flex-shrink: 0;
  background: red;
  white-space: nowrap;
}

Answer 3

display:flex会完成这项工作：

＆＃13;

＆＃13;

.outercontainer {
  width: 500px;
}

.container {}

.row {
  display: flex;
}

.left {
  background: green;
  white-space: nowrap;
}

.center {
  flex: 1;
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
}

.right {
  background: red;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

显示：网格将在某一天

＆＃13;

＆＃13;

.outercontainer {
  width: 500px;
}

.container {}

.row {
  display: grid;
  grid-template-columns:auto 1fr auto;
  overflow:hidden;
}

.left {
  background: green;
  white-space: nowrap;
}

.center {
  overflow: hidden;
  background: yellow;
  white-space: nowrap;
}

.right {
  background: red;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;