Question

我在pre元素（html表格的单元格）中有一个td元素。该表应该使用父元素的所有空间，为它的所有列维护相同的witdh，而没有任何单元格或表本身溢出空间。

如果没有pre元素，它将按照描述工作，不需要任何额外的CSS。但是使用pre元素，包含它的单元格被扩展为适合pre元素的内容：不再强制执行50/50的collumns共享，整个表格不再适合屏幕和整个页面现在可以滚动。

我想通过仅为pre元素设置滚动条来解决此问题，因此其中的任何内容都不会将表格扩展到屏幕外。

我尝试使用overflow-x：

pre {
    overflow-x: auto;
}

但它没有效果。

这是一个最小的例子：

pre {
  overflow-x: auto;
  background-color: pink;
}

<table border="1">
    
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
    
<td>
<p>Enim mollitia nostrum ut consequatur omnis neque. Esse itaque incidunt magni voluptas tempore aut quia.</p>
</td>
    
<td>
<pre>
curl --fail-early -I https://stackoverflow.com/questions/50782030/lstm-adding-the-encoders-hidden-states-to-the-decoder-in-order-to-increase-per
</pre>
<p>Enim mollitia nostrum ut consequatur omnis neque. Esse itaque incidunt magni voluptas tempore aut quia.</p>
</td>
    
</table>

Answer 1

您可以在table-layout: fixed元素上使用width: 100% table，然后在overflow-x: auto元素上设置pre。

table {
  width: 100%;
  table-layout: fixed;
}
pre {
  overflow-x: auto;
}

<table border="1">
  <colgroup>
    <col width="50%">
    <col width="50%">
  </colgroup>
  <td>
    <p>Enim mollitia nostrum ut consequatur omnis neque. Esse itaque incidunt magni voluptas tempore aut quia.</p>
  </td>
  <td>
    <pre>
curl --fail-early -I https://stackoverflow.com/questions/50782030/lstm-adding-the-encoders-hidden-states-to-the-decoder-in-order-to-increase-per
</pre>
    <p>Enim mollitia nostrum ut consequatur omnis neque. Esse itaque incidunt magni voluptas tempore aut quia.</p>
  </td>
</table>

使td内的pre元素可滚动

1 个答案: