css - 如何使 <pre> 水平滚动并且在非固定表格单元格内不溢出？

Question

我有这个:

<table>
    <tbody>
        <tr>
            <td>
                <pre style="overflow: scroll;">
                    (really long lines of text)

JSFiddle:https://jsfiddle.net/x7n8w02f/

在我的场景中，我有以下考虑:

• <table>不能有table-layout: fixed (在我的真实页面中 <table> 有 width: 100% 但在 JSFiddle 中它是 width: 600px )。
• <td> 的宽度各不相同。
• <pre> 中没有自动换行并且必须保留空格。
• <pre>需要填充 <td> 的宽度.
• <pre> 中的文本不得溢出或溢出 <pre> 的视觉范围之外(这与 <td> 相同，忽略填充和边距)，所以 <pre>如果文本比 <td> 宽，则必须水平滚动.

但是似乎没有任何办法可以做到这一点!

到目前为止我见过的所有解决方案都对文档和样式表设置了一些限制:

• 使用table-layout: fixed关于<table> .
• 设置 <pre> 的绝对宽度与 overflow: scroll (或 overflow-x: scroll )，例如width: 500px但不是width: 100% (这不起作用)。
• 我已经改变了所有 white-space , word-wrap , overflow ，和overflow-x CSS 属性无效。

Answer 1

如果我正确理解了要求，您可以将 pre 元素作为绝对定位的框放入相对定位的 td 元素内。像这样。

table {
  border: 1px outset #999;
  
  width: 600px;
}
td, th {
  border: 1px inset #999;
}
.pre-container {
  position: relative;
}

pre {
  border: 1px solid red;
  overflow: auto;
  position:absolute;
  left:0;
  right:0;
  margin:0;
  top:0;
  bottom:0;
}

<table>
<tbody>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
    <td class="pre-container">
      <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl nisi, volutpat eget tempus vitae, iaculis non magna. Phasellus efficitur ante ipsum, eget posuere diam dapibus at. Sed vel leo sit amet sapien feugiat congue. Nunc lorem velit, bibendum eu dignissim eu, efficitur ultrices metus. Suspendisse accumsan dolor ut tortor maximus, et volutpat velit eleifend. Donec commodo malesuada auctor. Proin cursus euismod porttitor. Duis posuere id ex sollicitudin vestibulum. Sed nisi odio, imperdiet ac mollis sit amet, luctus id odio. Fusce laoreet libero non nunc ornare, ac pharetra mi rutrum. Quisque rhoncus vehicula lorem, sit amet consequat neque. Nullam sodales ligula ac orci tincidunt semper. In efficitur magna ut viverra eleifend.

Donec luctus purus nunc, id suscipit nisi dignissim quis. Vivamus vel ligula massa. Proin nec scelerisque ligula. Mauris tristique metus enim. Quisque blandit nunc at nunc maximus laoreet. Nunc nisl sapien, lacinia vitae risus vitae, rutrum interdum nibh. Nunc a sem sem. Ut leo lectus, tempus a sagittis eu, mattis eu orci. Pellentesque dignissim mi diam, et sollicitudin leo facilisis pretium. Ut et tempor dolor. Suspendisse laoreet odio elit, at ultricies justo pellentesque quis. Vestibulum et diam ac ipsum laoreet maximus ac eu elit. Integer et elementum urna.

Curabitur sagittis tortor eu justo laoreet, nec pharetra massa congue. Duis hendrerit venenatis diam, non suscipit arcu. Quisque aliquam pretium mauris, ac cursus risus eleifend nec. Nulla non sem ac mi auctor tempus in nec velit. In cursus vel ex nec pellentesque. Etiam consequat eget libero nec dictum. Vestibulum viverra neque vel urna semper vehicula. Praesent ac felis sollicitudin, convallis nisi vel, consequat lorem. Morbi eu elit at enim tempor maximus vel ut magna. Integer dignissim convallis consequat.

Fusce aliquam libero in sem volutpat rhoncus. Suspendisse vulputate interdum nibh non efficitur. Morbi massa dolor, egestas a sodales a, rhoncus quis turpis. Vivamus velit erat, rutrum vitae lectus sed, luctus vulputate augue. Aenean elementum tortor eros, eget hendrerit purus viverra eget. Praesent ultricies pulvinar gravida. Nullam pulvinar feugiat laoreet. Fusce sit amet est facilisis, mattis erat a, consectetur felis. Sed eleifend faucibus felis, eget auctor nunc egestas suscipit. Sed in lobortis mi. Phasellus aliquet elit at tristique ullamcorper. Nullam augue eros, ornare et nisl ac, tempor volutpat sem. Praesent in felis vehicula, imperdiet mi eget, laoreet diam.

Praesent at tellus diam. Fusce vulputate, ipsum non vulputate vehicula, elit sem viverra mi, eu suscipit arcu leo et mi. Curabitur nec dolor ultrices, bibendum eros hendrerit, gravida ex. Donec ac porttitor erat. Nullam gravida egestas mi, vel tristique ante suscipit nec. Nullam ut ante rhoncus nisi varius feugiat. Pellentesque aliquet tincidunt ante vitae sollicitudin.</pre>
    </td>
  </tr>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
  </tr>
</tbody>
</table>