html - 如何在表格单元格内创建全宽可滚动 div？

Question

如何改变这个:

进入这个:

在这个 fiddle 中: https://jsfiddle.net/d3ckh9qd/2/

table{
  width:100%;
  border-collapse:collapse;
}
td{
  border:1px solid red;
  padding:10px;
}
.td-left{
  width:100%;
}
.div-parent{
  width:800px;
  border:5px solid rgba(0,255,255,0.7);
}
.div-right{
  white-space:nowrap;
  background:rgba(0,0,255,0.1);
}
.pre-scrollable{
  background:rgba(0,255,0,0.3);
  padding:10px;
  white-space:pre;
  overflow:auto;
  width:100%;
  box-sizing:border-box;
}

<div class="div-parent">
  The table below should not exceed parent container:
  <table>
    <tr>
      <td class="td-left">
        <strong>This column should fill the remaining width, respecting the dynamic width of the right column</strong><br>
        <pre class="pre-scrollable">This should match width of the parent container and it's content should scroll horizontally.</pre>
      </td>
      <td class="td-right">
        <strong>This column should autosize to it's contents</strong><br><br>
        <div class="div-right">
          Dynamically generated content goes here
        </div>
        <br>
        <div class="div-right">
          This content has different width each time it loads
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 1

为右侧设置一个固定宽度 px，为左侧设置一个 100% 宽度和一个 overflow-x