我有一个有两列的表。一个有一些属性名称，另一个有描述，包括预标记。我需要预标记不换行，而是滚动以查看溢出。我还需要根据最大的属性名称调整第一列的大小。我无法让两个人好好相处。
例如，我可以根据内容调整第一列的大小，但 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>
我还可以让预滚动，但随后我无法调整第一列的大小：
.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>
有什么想法可以让我在保留表格布局的同时使两者都工作吗？我知道如何使用网格和弹性盒等其他方法来做到这一点，这不是我要问的。
你可以考虑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>
相关问题：如何将文本宽度与动态大小图像的宽度相匹配？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
