HTML表格中的样式列单元格

我正在研究一个asp.net mvc 3应用程序。下面是表列我想风格的打印屏幕：HTML表格中的样式列单元格

Table column

我西里尔遗憾。在单元格中的每一行与此代码创建：

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

而CSS是：

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

我想要的是 - 你可以看到一切都在小区的中间留下了很多在单元格顶部和底部的空白空间。我想让文本更平均一些。我试图在CSS中添加一些padding-bottom，但它不适合这项工作。

来源

2013-05-13 Leron

你可以在jsfiddle上模拟相同的情况 – dreamweiver 2013-05-13 13:57:48

说实话，我没有经验在jsfiddle中做事。这将需要我太多时间来重新创建。 – Leron 2013-05-13 13:59:53

jsfiddle是超级简单而实用的。这只是复制/粘贴您的HTML标记和CSS的问题。我强烈建议试试:)。 – 2013-05-13 14:04:35

你想让文字上方和下方的空间变小吗？它看起来像是让表格单元格的高度扩大。有问题的单元格的左侧或右侧是否填充了该行的整个高度？可能有一个高度适用于该行。尝试将height:auto;添加到行和单元格中。

来源

2013-05-13 14:00:47 Dustin

看来，身高：自动;和行高;在我的情况下，行为几乎相同，除非我将行高设置为像3px这样的小东西。我不知道为什么填充不起作用。 – Leron 2013-05-13 14:10:42

有问题的单元格左侧或右侧单元格中是否有任何内容？我只是有一种感觉，那就是让这一行扩大。 – Dustin 2013-05-13 14:14:09

是的，就像在原始文章中所说的那样，打印屏幕只是我喜欢的样式栏，它甚至不是列，而是特定的单元格。有四列，并且行的高度默认情况下从最高单元格中确定，这不是我在此处显示的单元格。实际上它是从这个单元格留下的单元格，但在那里一切正常，但由于左侧单元格比这更大，我想要设置此单元格中的文本以更均匀地占据空间。 – Leron 2013-05-13 14:20:59

也许CSS属性“line-height”将帮助你。但是，这对于整个表格的一个单元格来说似乎是非常有限的修补程序。如果你可以添加你的标记和CSS到一个新的Fiddle，那么这将有助于提出一个更优雅的解决方案。如果你想让背景颜色填充整个单元格（而不仅仅是文本的位置）以避免文本上方和下方的白色，那么你应该将“背景颜色”CSS应用到类中在你的“td”标签上，而不是跨越td。

来源

2013-05-13 14:00:59 JacobMcLock

不，颜色只是...不知道它不会留下来。但是如果span标签之间的空间可以调节，那将会很好。行高似乎不适用于我的情况。 – Leron 2013-05-13 14:11:55

HTML表格中的样式列单元格

回答

相关问题