嵌套表宽度问题

Question

我遇到嵌套表宽度问题。我需要将表作为响应。喜欢以下图片。这是我的代码 DEMO

HTML

<div class="layout">
  <div class="left">Left</div>
  <div class="right">
    <div class="table-responsive">
      <table>
        <tr>
          <th>Sample Headding</th>
          ...
        </tr>
        <tr>
          <td>Sample Headding</td>
          ...
        </tr>
        </table>
    </div>
  </div>
</div>

CSS

.layout {
  width: 800px;
  display: table;
}
.layout .left, .layout .right {
  display: table-cell;
}
.layout .left {
  width: 25%;
  background: #eee;
}

.table-responsive {
  width: 100%;
  margin-bottom: 15;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #CCC;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > tfoot > tr > td {
  white-space: nowrap;
}

Answer 1

您是否尝试过“table-layout：fixed;”属性？

JSFIDDLE：http://jsfiddle.net/manublueheart/c6CdL/3/

.layout {
 width: 800px;
 display: table;
 table-layout:fixed;     
}

Answer 2

尽管我知道桌子无法做出响应。而不是表使用div并给它们以％为单位的响应宽度。