防止出现在表格的内部，防止[]包裹>>
我有一个两列的表。一个具有一些属性名称，另一个具有描述，包括前置标记。我需要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之类的其他方法来做到这一点，这不是我要问的。
我有一个两列的表。一个具有一些属性名称，另一个具有描述，包括前置标记。我需要pre标签不包装，而是滚动以查看溢出。我还需要...