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并让它们风格清晰：两者

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

1 个答案: