填充内联块父div中的剩余宽度

Question

#wrapper div设置为inline-block，由于某种原因我无法更改或添加任何内容。

我需要#wrapper div中的表格显示：

#page {
  display: block;
  background-color: #dd3333;
}

#wrapper {
  /* Cannot change this: */
  display: inline-block;
  background-color: #33dd33;
}

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  width: 50%;
}

<div id="page">
  <div id="wrapper">
    <div class="table">
      <div class="table-row">
        <div class="table-cell">
          Table cell 1
        </div>
        <div class="table-cell">
          Table cell 2
        </div>
      </div>
      <div class="table-row">
        <div class="table-cell">
          Table cell A
        </div>
        <div class="table-cell">
          Table cell B
        </div>
      </div>
    </div>
  </div>
</div>

问题是，由于.table，#wrapper没有填满整个宽度。我希望“表格单元格1”和“表格单元格2”用相等的列填充整个屏幕。这有一个纯粹的CSS解决方案吗？

（这可以通过删除#wrapper div，某些js更改其display属性或将.table移出#wrapper轻松解决。）

Answer 1

将width:100%应用于#wrapper div

Stack Snippet

＆＃13;

＆＃13;

#page {
  display: block;
  background-color: #dd3333;
}

#wrapper {
  /* Cannot change this: */
  display: inline-block;
  background-color: #33dd33;
  width:100%;
}

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  width: 50%;
}

＆＃13;

<div id="page">
  <div id="wrapper">
    <div class="table">
      <div class="table-cell">
        Table cell 1
      </div>
      <div class="table-cell">
        Table cell 2
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

已更新： 如果您不想更改#wrapper div，则可以使用css子选择器{{1}喜欢

>

＆＃13;

＆＃13;

#page>div {
  width: 100%;
}

＆＃13;

#page {
  display: block;
  background-color: #dd3333;
}

#page>div {
  width: 100%;
}

#wrapper {
  /* Cannot change this: */
  display: inline-block;
  background-color: #33dd33;
}

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  width: 50%;
}

＆＃13;

＆＃13;

＆＃13;