防止< pre>从包装在桌子里面 [英] Preventing a <pre> from wrapping inside of a table

问题描述

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

I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.

例如，我可以根据内容确定第一列的大小，但pre不会滚动:

For example I can get the first column to size based on the content but the pre won't scroll:

.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滚动，但随后我无法调整第一列的大小:

I can also get the pre to scroll but then I can't get the first column to resize:

.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)来做到这一点，这不是我要问的.

Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.

推荐答案

您可以在 pre 上使用 width:0; min-width:100％; 技巧.这个想法是 width:0 将禁用 pre 在定义容器宽度上的作用，然后 min-width:100％强制其填充所有空间:

You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the 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>从包装在桌子里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！