css - 防止 <pre> 包裹在表格内

Question

我有一个包含两列的表格。一个有一些属性名称，另一个有描述，包括预标记。我需要预标记不换行，而是滚动以查看溢出。我还需要根据最大的属性名称调整第一列的大小。我无法让两个人和谐相处。

例如，我可以根据内容调整第一列的大小，但前列不会滚动:

.main-content {
  max-width: 800px;
  border: 1px solid red;
}
pre {
  overflow: auto;
}

<div class="main-content">
  <table border="0" class="config">
    <thead>
      <tr>
        <th>Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="config-name">name</td>
        <td class="config-description">

          <p>Foo bar talking about some random things related to our code here in the paragraph:</p>
          <pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
					</td>
				</tr>
    </tbody>
  </table>
</div>

我也可以让预滚动，但随后我无法让第一列调整大小:

.main-content {
  max-width: 800px;
  border: 1px solid red;
}
table {
  table-layout: fixed;
  width: 100%;
}
th:first-of-type {
  width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
} 
pre {
  overflow: auto;
}

<div class="main-content">
  <table border="0" class="config">
    <thead>
      <tr>
        <th>Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="config-name">name</td>
        <td class="config-description">

          <p>Foo bar talking about some random things related to our code here in the paragraph:</p>
          <pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
					</td>
				</tr>
    </tbody>
  </table>
</div>

有什么想法可以让我在保留表格布局的同时使两者都工作吗？我知道如何使用 grid 和 flexbox 等其他方法来做到这一点，这不是我要问的。

Answer 1

您可以考虑在 pre 上使用 width:0;min-width:100%; 技巧。这个想法是，width:0 将禁用 pre 对定义容器宽度的贡献，然后 min-width:100% 将强制它填充所有空间:

.main-content {
  max-width: 800px;
  border: 1px solid red;
}

th:first-of-type {
  white-space:nowrap;
} 
pre {
  overflow: auto;
  width:0;
  min-width:100%;
}

<div class="main-content">
  <table border="0" class="config">
    <thead>
      <tr>
        <th>Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="config-name">name</td>
        <td class="config-description">

          <p>Foo bar talking about some random things related to our code here in the paragraph:</p>
          <pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
					</td>
				</tr>
    </tbody>
  </table>
</div>

相关问题:How to match width of text to width of dynamically sized image?