html - 如何删除表溢出中创建的空间

Question

每当我试图让我的表格滚动时溢出并显示 block css。表格宽度总是变小并留下空白空间。为什么会这样？我在这里做错了什么。我的表格在一个 div 中。

HTML:

<div id="window">
    <div id="tableContainer">
        <table>
            <thead>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS:

div{
    width:500px;
    height:500px;
    display:block;

}
table 
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
    border:1px solid black;}
}

fiddle :

http://jsfiddle.net/KrP7v/117/

Answer 1

HTML:

<div id="window">
<div id="tableContainer">
    <table>
        <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#tableContainer{
   float:left;
   height:100px;
   display:block;
   overflow-y: scroll;
   float:left   
}
  table 
{
   height:100px;
   display:block;
   float:left;
}
table td{
    border:1px solid black;}
}

http://jsfiddle.net/4erveak/KrP7v/118/

这是针对你的错误的修复，但最后添加一个 div 并让它们的样式清晰:两者