CSS - 如何防止此表溢出？

Question

我设计了一个网页，使用Javascript从Yahoo Finance检索股票信息。我现在有问题格式化表格，因为该表格包含太多列以显示在屏幕上。

我想要实现的是让用户滚动表格以查看超出预定义限制的列/行。

我试图结合使用这些格式，但无济于事：

#stockDataTable {
    max-width:600px;
    table-layout: fixed;
    overflow-x: scroll;
    overflow-y: scroll;
}

您对格式化表格有什么建议吗？

我在jsfiddle.net中保存了html和css代码： http://jsfiddle.net/lcazarre/PCW6F/

谢谢， LC

Answer 1

您无法阻止表格在宽度上增长，但您可以简单地插入DIV中具有固定宽度和overflow: scroll的DIV。

Answer 2

HTML：

<div id="wrap-table">
    <table id="stockDataTable">
        ...
    </table>
</div>

CSS：

#wrap-table {
    overflow:scroll;

    /* Add some padding so the scrollbar isn't overlapping the table */
    padding-bottom:10px; 
}