CSS：水平溢出a table

Question

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

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

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

jsfiddle link

Answer 1

您可以使用以下属性::

overflow: auto; height:100px;

Answer 2

没问题。我找到了答案：

.mytable {
  border: 1px solid blue;
  display: inline-block;
  max-width: 100%;
  overflow-x: scroll;
}

CodePen

CSS：水平溢出a table

CSS: horizontally overflow a table

html

css

overflow

css-tables