html - CSS:水平溢出表格

Question

问题是:有些 HTML 是由其他人自动生成的，我无法修改。我被要求编写一个样式表来修复表格显示。 <table>元素包含在 <div> 中元素。如果<table>比 <div> 宽元素，那么它将溢出。解决此问题的最简单方法是添加 overflow-x: scroll到 <div>元素。但是，<div> 中还有其他元素。元素，这也将滚动这些元素。所以这种方法是不行的。

我现在最好的解决方案是使用 display: block 强制表格显示为 block 元素在 <table> 上元素。然后添加 overflow-x: scroll在 <table> 上element 似乎解决了溢出问题。但是此方法会出现另一个问题:当 <table>没有足够的单元格，它仍然会全宽(因为它显示为 block 元素)。这会造成可怕的边界。

那么如何在单元格较多时正确溢出表格，在单元格较少时正确显示边框呢？

jsfiddle link

Answer 1

您可以使用以下属性::

overflow: auto; height:100px;