我在一个容器里有一张基本的桌子.该表将有大约25列.我正试图在溢出的桌子上添加一个水平滚动条,我真的很难过.

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

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

非常感谢!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.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;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS fiddle(注意:如果可能,我希望水平滚动条位于带有红色边框的容器中):

推荐答案

我想你的overflow应该在外容器上.还可以显式设置列的最小宽度.这样地:

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

小提琴:http://jsfiddle.net/5WsEt/

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算?

向左或向右浮动时的不同图像边距

如何在不重叠侧边栏的情况下尽可能使元素居中?

为什么在RadixUi上应用Tailwincss和自定义css类不起作用?

如何使用DirectusImage标签作为背景?

如果 css 仅位于 razor 页面中的一页上,我是否仍应在 wwwroot 中写入或仅将其放在页面上?

使用纯 CSS 访问跨度内容并设置其样式

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

当滚动量较小时,在滚动问题上动画粘性导航

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

带有 flex 的 CSS 空 div 以扩展并保持纵横比

如何禁用 Angular Material Pagination 按钮的波纹效果?

普通流,流布局,块和内联布局有什么区别?

我怎样才能让这个边框出现在按钮元素的上方?

CSS中的旋转地球

导航栏中的 Bootstrap 3.0 按钮

Angular 5 在某些类中添加了ng-star-inserted - 那是什么?

字体上的 Font-Awesome 错误 404

使用 CSS 垂直居中旋转文本

通过 Bootstrap4 对列进行排序