인접한 표 셀의 항목을 세로로 정렬하는 데 문제가 발생했습니다.

Question

일부 표의 행에 스타일 문제가 있습니다. 이 스크린 샷에 따라 :

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

파란색과 빨간색 원 (높이 50 픽셀입니다) 테이블 행의 셀입니다. 둘 다 "세로 정렬 : 위쪽"으로 스타일이 지정됩니다. 전화 번호 데이터 (빨간색 원 안에 있음)는 실제로 파이프에 대해 HTML 나누기를 대체 한 파이프 구분 문자열입니다.

녹색 원 안에는 팩스 라벨이 "세로 맞춤 : 위쪽"이지만 팩스 번호의 실제 목록 (세로로 구분)은 세로 정렬 : 중간입니다.

내가 원하는 것은 위의 전화 번호/팩스가 레이블과 수직으로 정렬되도록 정리하는 것입니다. 전화/팩스 문자열의 파이프 교체가이 문제의 원인입니까? 데이터베이스 테이블/앱을 변경하지 않고 원하는 것을 얻을 수있는 방법이 있습니까?

업데이트 : 테이블 셀의 일부 패딩을 통해이를 수행했습니다. 나는 대부분 일렬로 늘어져 있기 때문에 일종의 말을하고 있지만, 침몰의 느낌은 내가 원하는 것이기 때문에 일어나는 것이 아니라 무작위적인 기회로 인해 일어난다. 그리고 그것이 내가 가장 옳게 보이기 위해 필요할 때 언젠가는 나를 배반 할 것입니다.

Answer 1

은 다음과 CSS보십시오 :

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

당신은 아마 vAlign와 물건에 의존해서는 안를, 그-이후 긴 CSS로 대체되었습니다입니다.

Answer 2

당신은 라벨을 (의미 론적으로) 호출합니다. 레이블 태그도 사용하고 있습니까? 그렇다면 그것이 어떤 것들을 엉망으로 만든 CSS 규칙이 적용되어 있는지 확인하십시오.

첫 번째 (파란색/빨간색) 이것은 둘 다 valign : top 인 경우 이상하게 보입니다. 레이블에 상단 여백 또는 패딩이 적용되었는지 또는 vertical-align : middle?와 함께 일부 CSS 규칙이 있는지 확인 했습니까?

2의 경우 (녹색) 하나가 중간이고 다른 최고는 당신이 그 (것)들을 정렬 할 수 없다 경우, 당신은 ... ..뿐만 아니라 상단에 정렬하는 나는 앵무새의 구현에 동의

Answer 3

가 필요합니다 CSS의 경우, 셀에 다른 글꼴과 글꼴 크기를 사용하면 동일한 스타일을 적용한 경우에도 셀에 글꼴 크기와 글꼴 크기가 서로 다르게 표시됩니다. 정렬이 당신이 만들고있는 페이지의 모양/느낌에 중요하다면 나는 데이터를 다시 분리하고 머리말의 행 "전화"와 "팩스"가 colspan="2" 인 각 전화/팩스 번호를 자신의 머리글로 만드는 것을 고려할 것입니다.

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

그리고 아니, <br />와 |의 대체가 너무 오래 선행 |의가없는 한, 테이블의 모양에 부정적인 영향을 미치지 않습니다.