为什么CSS表格单元格中有空格？

Question

为什么左右两边的细胞充满了空白？

空白区位于左右表格单元格之上。

http://jsfiddle.net/Tim86/NU9sA/

它与#middlebuttons{display:block;}。

有关

编辑：我使用的是Firefox 5.

EDIT2：图片

错误

右

Answer 1

我认为它在Firefox中是this bug。解决方法似乎是添加以下内容：

#middleButtons {
    vertical-align:top;
}

在Chrome浏览器中看了一段时间并且看不到问题！

Answer 2

为什么不使用float：left而不是table-cell？ http://jsfiddle.net/NU9sA/5/

Answer 3

尝试在

中添加float: left;

#middleButtons input
{
    display: block;
}

Answer 4

您需要将padding取消div #ungroupedStudentsWrapper的{​​{1}}顶部。

这样做

#middleButtons, #ungroupedStudentsWrapper, #groupWrapper 
{ 
    display: table-cell; 
    padding:0 .8em .8em .8em; 
} 

http://jsfiddle.net/jasongennaro/NU9sA/7/

Answer 5

这是因为你在第一个选择元素上设置了300px的高度。

<div>Alla studenter</div>
<select style="height:300px;" id="UngroupedStudents" multiple="multiple" name="UngroupedStudents" size="4">

显示空白区域，因为此select元素包含7个小于指定高度300px的选项元素

<option value="Anatoly">Anatoly</option>
<option value="Marie">Marie</option>
<option value="Sara">Sara</option>
<option value="Peter">Peter</option>
<option value="Jocke">Jocke</option>
<option value="Sinan">Sinan</option>
<option value="Tom">Tom</option>

如果移除高度或使高度小于显示上述7个选项元素所需的空间，则将删除白色psace。

对于

中的第二个选择元素

  <div class="groupHeader" id="gh1">Grupp 1</div>

您已将样式设置为

 select 
 { 
 min-width:100px; 
 min-height: 100px;
 }

由于此select元素仅包含4个选项元素

<option value="Tim">Tim</option>
<option value="Jens">Jens</option>
<option value="Ann">Ann</option>
<option value="Anders">Anders</option>

100px的指定高度大于显示上述4个选项元素所需的空间，因此为空格。

Updated Fiddle