每当我试图让我的表格滚动时溢出并显示 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 :
最佳答案
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 并让它们的样式清晰:两者
关于html - 如何删除表溢出中创建的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30839526/