防止 <pre> 包裹在 table 内部

Question

我有一个包含两列的 table。一个有一些属性个名字，另一个有描述，包括前置标签。我需要 pre 标签不换行，而是滚动查看溢出。我还需要根据最大的属性名称调整第一列的大小。没法让两人好好相处

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

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

我也可以让 pre 滚动，但是我无法让第一列调整大小：

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

关于如何在保留 table 布局的同时使两者同时工作的任何想法？我知道如何使用其他方法（如 grid 和 flexbox）来实现，这不是我要问的。

Answer 1

我能看到的唯一方法是用 overflow: auto 将 <pre> 包裹在 <div> 中，并将单元格设置为 display: grid

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

table {
  table-layout: auto;
  width: 100%;
}

.config-name {
  white-space: nowrap;
}

.config-description {
  display: grid;
}

.config-description div {
  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>
          <div>
            <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>
          </div>
        </td>
      </tr>
      <tr>
        <td class="config-name">longer&nbsp;property&nbsp;name</td>
        <td class="config-description">

          <p>Just another description, this one without a &lt;pre&gt;</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

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

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

防止 <pre> 包裹在 table 内部

Preventing a <pre> from wrapping inside of a table

css

html-table

pre

word-wrap

multiple-columns