HTML表格中的样式列单元格

Question

我正在开发一个asp.net mvc 3应用程序。这是我想要样式的表格列的打印屏幕：

我很抱歉西里尔文。单元格中的每一行都使用以下代码创建：

                @:<span class="TableColumn4">
                @field[i].QuestionText;
                @::
                @field[i].FieldValue;
                @:</span> 

CSS是：

span.TableColumn4 {
    background: lightgrey;
    display: block;   
}

我想要的是 - 你可以看到一切都在细胞的中间，在细胞的顶部和底部留下了很多空的空间。我想让文本更加均匀。我试图在CSS中添加一些padding-bottom，但它没有完成任务。

Answer 1

您是否试图让文字上方和下方的空间变小？看起来有些事情正在使得桌子的高度扩大。有问题的单元格的左侧或右侧是否有内容填满该行的整个高度？可能有一个高度应用于该行。尝试将height:auto;添加到行和单元格中。

Answer 2

也许CSS属性“line-height”会对您有所帮助。但是，对于整个表格的一个单元格来说，这似乎是非常有限的修复。如果您可以将标记和CSS添加到新的Fiddle，那么提供更优雅的解决方案将会有所帮助。

此外，如果您希望背景颜色填充整个单元格（而不仅仅是文本的位置）以避免文本上方和下方的白色，那么您应该将“背景颜色”CSS应用于类你的“td”标签，而不是td内的跨度。