レスポンシブデザインする時に、tableがコンテナーに合わせて自動調整するように、widthをパーセンテージで書くことが多い。

しかしtdに複雑な内容（<pre>や<code>など）が入っているとtableが膨張してしまう。table-layout:fixed;を使えばそういった問題は解決できる。

デモ：https://jsfiddle.net/ezb58oxo/3/

HTML

<div class="wrap">
  <table class="table">
    <thead>
      <tr>
        <td>key</td>
        <td>value</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <div class="content">
            <pre>
              <code>
                ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容
              </code>
            </pre>
          </div>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>value 2</td>
      </tr>
    </tbody>
  </table>
 </div>

CSS

.wrap {
  width: 100%;
}.table {
  width: 100%;
  table-layout: fixed; // fixedにすることで、常に親のwidthにフィットする。コメントアウトしてみてください
}
.table td,
.table th {
  border: 1px solid #DFDFDF;
  padding: 1rem;
}
.table tr > td:first-child,
.table tr > th:first-child{
  width: 30%; // 最初のカラムだけ30%のwidthを確保
}
div.content {
  width: 100%;
}
div.content pre {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: auto;
}

th要素がある場合は、cssの記述も忘れないように