Question

我有一个有两列的表。一个具有一些属性名称，另一个具有描述，包括前置标记。我需要pre标签不包装，而是滚动以查看溢出。我还需要根据最大的属性名称来调整第一列的大小。我不能让两个人互相配合得很好。

例如，我可以根据内容确定第一列的大小，但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>

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

Answer 1

我看到的唯一方法是将// Import and Set Nuxt.js options const config = require('../nuxt.config.js') config.dev = process.env.NODE_ENV !== 'production' function updateConfigModuleSettings(name, settings) { const i = config.modules.findIndex(m => Array.isArray(m) && m[0] === name) if (i > -1) { const oldSettings = config.modules[i][1] config.modules[i][1] = { ...oldSettings, ...settings } } else { throw new RangeError(`Nuxt module named '${name}' could not be found`) } } // call the function as many times as you like with your module settings overrides updateConfigModuleSettings('@nuxtjs/google-gtag', { id: process.env.GOOGLE_ANALYTICS_ID, debug: process.env.NODE_ENV === 'development', // enable to track in dev mode }) async function start () { // this will take the overridden config const nuxt = new Nuxt(config) // ... } start()用<pre>包裹在<div>中，并将单元格设置为overflow: auto

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

Answer 2

您可以在width:0;min-width:100%;上使用pre技巧。这个想法是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?

防止<pre>包装在表格内部

2 个答案: