表格较窄的表格溢位

Question

我正在尝试使表中的元素溢出：自动。因此，当内容（通常为json）超过可用宽度时，请使用滚动条。最重要的是，我试图使第一列的内容尽可能窄，而不会破坏空白。但是到目前为止，我还无法获得想要的效果。我尝试固定表优先级，但这会使窄列的行为不符合我想要的方式，但是会使元素溢出。仅通过从第一列中删除或设置窄并固定表格或在列上设置固定宽度，才可以使元素溢出。有人知道吗？

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: solid 1px black;
}

.table td,
.table th {
  padding: 5px;
  border: 1px solid black;
}

.table .narrow {
  width: 1px;
}

.whitespace-nowrap {
  white-space: nowrap;
}

pre {
  overflow: auto;
  border: 1px solid grey;
  margin: 0;
}

<table class="table">
  <thead>
    <tr>
      <th class="narrow">Narrow</th>
      <!-- want this column to be narrow (as width as the content) -->
      <th>Fill up remaining space</th>
      <!-- takes the remaining space -->
      <th>Fill up remaining space</th>
      <!-- takes the remaining space -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="whitespace-nowrap">
        <!-- want this column to be narrow (as width as the content) -->
        long_attribute_name
      </td>
      <td>Foobar</td>
      <!-- takes the remaining space -->
      <td>Blah</td>
      <!-- takes the remaining space -->
    </tr>
    <tr>
      <td class="whitespace-nowrap">
        <!-- want this column to be narrow (as width as the content) -->
        attribute_2
      </td>
      <td>
        <pre>{
  "width": "want this pre element to display scrollbars in the table if exceeds the available width"
}</pre>
      </td>
      <td>
        <pre>{
  "width": "want this pre element to display scrollbars in the table if exceeds the available width"
}</pre>
      </td>
    </tr>
  </tbody>
</table>