Question

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

我目前最好的解决方案是使用display: block元素上的<table>强制将表显示为块元素。然后在overflow-x: scroll元素上添加<table>似乎可以解决溢出问题。但是这种方法会出现另一个问题：<table>的单元格不足时，它仍将变为全角（因为它显示为块元素）。这使边界糟透了。

那么当有许多单元格时，如何正确地使表格溢出，而在只有少数单元格时，如何正确显示其边框呢？

jsfiddle link

Answer 1

您可以使用以下属性::

List<Item>

Answer 2

没问题。我找到了答案：

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

CodePen

CSS：水平溢出表格

2 个答案: