水平滚动表上的溢出

我有一个容器中的基本表。 该表格将有大约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小提琴(注:如果可能,我想水平滚动条在红色边框的容器中):http://jsfiddle.net/ZXnqM/3/


我认为你的溢出应该在外部容器上。 您还可以明确设置列的最小宽度。 喜欢这个:

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

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


除非我严重误解了你的问题,否则将overflow-x:scroll.search-table overflow-x:scroll.search-table-outter

http://jsfiddle.net/ZXnqM/4/

.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;}

你应该在div中提供滚动。

链接地址: http://www.djcxy.com/p/94527.html

上一篇: Horizontal scroll on overflow of table

下一篇: table cell content rotation bug in ie8 and ie9