Html 表溢出时的水平滚动

我有一个容器中的基本表格。该表将有大约25列。我正试图添加一个水平滚动条溢出的表，我有一个非常艰难的时间

现在的情况是，表格单元格通过自动调整单元格高度并保持固定的表格宽度来容纳单元格内容

我很感激任何关于为什么我的方法不能解决这个问题的建议

非常感谢

CSS

HTML

可乐
可乐
可乐
可乐
可乐
可乐

JS fiddle（注意：如果可能，我希望水平滚动条位于带有红色边框的容器中）：

---

除非我严重误解了你的问题，否则请将

溢出-x：从
滚动
。搜索表
到
。搜索表超出


据我所知，您不能将滚动条提供给表本身。
我认为您的
溢出应该在外部容器上。还可以显式设置列的最小宽度。像这样：

.search table out{overflow-x:scroll；}
th，td{最小宽度：200px；}

小提琴：
在一个对手机响应灵敏的网站上，整个东西必须绝对定位在一个相对间隔和固定高度上。为相关性设置媒体查询


@仅媒体屏幕和（最大宽度：480px）{
.滚动包装器{
位置：绝对位置；
溢出-x：滚动；
}
您应该提供scroll in div.
一个没有人提到的用于表的解决方案，并将
overflow-x
添加到包装器中

（）

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

HTML

<div class="wrapper">
    <table></table>
</div>



如果不希望行有多行，这是一个理想的方案。

要添加换行符，您需要使用

解决方案，以帮助那些不能或不想将
表
包装到
div中的人（例如，如果HTML是通过标记生成的），但仍然希望有滚动条：

表格{
显示：块；
最大宽度：-moz-fit内容；
最大宽度：适合的内容；
保证金：0自动；
溢出-x：自动；
空白：nowrap；
}

尤其是在移动设备上，桌子很容易变得比视口更宽。
使用正确的CSS，您可以在表格上获得滚动条，而无需包装它。
居中的桌子。
谢谢您的回复。请关闭，但不完全关闭，因为单元格的高度（
）仍然是自动调整的，注意，即使
最大高度：35px；
单元格比35px高出很多…太好了！这是我完全需要的！感谢您的解决方案我不必使用
空白：nowrap
，但我试图在表上使用
溢出-x:scroll
。您建议为表格并在那里使用它救了我。TY如果你使用，你可以去掉包装器。这真的非常适合降价，而不需要像其他答案一样使用表格包装器。这直接适用于通过WYSIWYG编辑器添加的表格，那里没有包装器，添加一个将是一个堆积如山的工作。谢谢@Kaspar etterth这正是我在需要RTE表格-谢谢！谢谢。一直以来，我都没有看到
display:block；
.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

<div class="wrapper">
    <table></table>
</div>