如何删除表格溢出产生的空间

Question

每当我尝试使用溢出和显示块 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;}
}

小提琴：

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 并使它们的样式清晰：两者

Answer 2

只需添加
表{空单元格：隐藏;}