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

Question

如何解决这个问题：

进入这个：

在这个小提琴中： https://jsfiddle.net/d3ckh9qd/2/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

为px设置固定宽度为右边，宽度为100％，溢出-x

Answer 2

确保将您的桌面布局设置为固定，然后将您的td设置为您想要的百分比（在我的情况下为60/40）。

https://jsfiddle.net/d3ckh9qd/6/

CSS

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

}