获取相邻表格单元中的项目时垂直对齐的问题

我对某些表格行具有很大的样式问题。按照此屏幕截图：获取相邻表格单元中的项目时垂直对齐的问题

alt text http://img706.imageshack.us/img706/9852/rowcellswontalign.png

的蓝色和红色圆圈是细胞在表行（高度为50像素）。两者均采用“垂直对齐：顶部”的样式。电话号码数据（在红色圆圈中）实际上是一个管道分隔的字符串，我用这些字符串代替管道的HTML分隔符。

在绿色圆圈中，Fax标签是“vertical-align：top”，但传真号码（也是分隔符）的实际列表是vertical-align：middle。

我想要的是让这些东西整齐排列，顶部的电话号码/传真与标签垂直对齐。我的电话/传真字符串中的管道中断是否是导致此问题的原因？有没有一种方法可以在不更改数据库表/应用程序的情况下获得我想要的内容？

更新：我通过表格单元格上的一些填充完成了这项工作。我之所以这么说，是因为它大多看起来排队，但我感觉这种情况并不是因为我想要，而是由于偶然的机会。而且，当我需要它看起来最正确的时候，它总有一天会背叛我。

来源

2010-01-13 peacedog

试试下面的CSS：

table td, table th { 
    vertical-align: top; 
}

你可能不应该依赖于VALIGN和东西，这是长期的，因为被替换为CSS。

来源

2010-01-13 14:24:23 Parrots

我错了;他们被称为CSS方式。我的错。 – peacedog 2010-01-13 14:33:59

我误解了造型是如何完成的;它是css驱动的。 – peacedog 2010-01-13 14:35:50

我是一个白痴，忘记了他在半分钟之前评论过半分钟。 – peacedog 2010-01-13 14:36:27

您称它们为标签（因为它们的语义是），您是否也在使用标签标签？如果是这样的话，请检查它是否应用了一些适用于它的css规则，从而导致混乱。

1st（蓝色/红色）这似乎很奇怪，如果他们都valign：顶部。你有没有检查标签上是否应用了一些顶部边距或填充，或者使用了vertical-align：middle的某个css规则？

第二种情况（绿色），你需要将其顶端对齐以及.. 如果是中部和其它顶级你永远无法将它们对齐..

来源

2010-01-13 14:28:32

我鹦鹉同意实施的CSS，你也应该注意到，在单元格中使用不同的字体和字体大小会使它们看起来没有对齐，即使对每个都应用相同的样式。如果对齐对于您正在创建的页面的外观/感觉很重要，那么我会考虑再次分离数据，并将每个电话/传真号码作为自己的标题，标题行为“电话”和“传真”，具有colspan="2"。

*------------------------* 
| Phone:     | 
|------------------------| 
| Back: | xxx-xxx-xxxx | 
|------------------------| 
| Front: | xxx-xxx-xxxx | 
|------------------------| 
| Fax:     | 
... etc.

而且不，|与<br />替代将会对表的外观没有负面影响，只要没有任何领先|秒。

来源

2010-01-13 14:31:29

我错了垂直对齐样式是如何完成的，fwiw。 – peacedog 2010-01-13 14:35:05

是的，我有一种感觉，我会后悔没有分开手机领域。问题是，我不能说出将列出多少电话/传真号码（我认为在某些情况下，它可能会超过四个）。也不是标签会是什么。我试图捕捉一个较旧的应用程序的外观。我仍然可以改变这一点，并去分开的领域。 – peacedog 2010-01-13 18:55:31

如果您在幕后使用任何种类的服务器端语言，您可以生成每一行，并在其中有适当的标签，如果它有一个值。否则，如果该字段不存在任何值，则只需将该行完全保留。这样，您可以根据需要动态声明行，并且您几乎不用担心样式。 – 2010-01-13 19:40:17

获取相邻表格单元中的项目时垂直对齐的问题

回答

相关问题