2010-12-01 5 views
1

이것은 슬프게도 나를 미치게합니다. 나는 내가 테이블의 "X"를 테이블 아래쪽에 맞출 수없는 이유를 알아낼 수 없다 ... CSS의 다른 위치에 세로 정렬을 시도했지만 아무 소용이 없다. (. 또한 여기에왜이 테이블에서는 '수직 정렬 : 하단'이 작동하지 않습니다.

? 내 테이블의 빈 공간에 대해 올바르게 사용하고 모두 내 HTML 및 CSS 파일을 자르는입니다 ... 의견 주시면 감사하겠습니다

<html> 
<head> 
<title>Day4: Table King</title> 
<link rel="stylesheet" type="text/css" href="stylesday4.css" /> 
</head> 

<body> 
<table id="products"> 
    <tr> 
    <th><span></th> 
<th>Free Version</th> 
<th>Lite Version</th> 
<th>Full Version</th> 
</tr> 
<tr> 
    <td>Advertising</td> 
    <td id="td">X</td> 
    <td><span></td> 
    <td><span></td> 
</tr> 
<tr class="alt"> 
    <td>Catering Software</td> 
    <td><span></td> 
    <td id="td">X</td> 
    <td id="td">X</td> 
</tr> 

....

#products 
{ 
border-collapse:collapse; 
width:100%; 
} 
#products th, #products td 
{ 
border:1px solid #0000FF; 
background-color:#C0C0C0; 
padding:3px 2px 7px 5px; 
} 
#products th 
{ 
font-size:20px; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
color:#0000FF; 
padding-top:4px; 
padding-bottom:5px; 
background-color:green; 
} 
#products td 
{ 
vertical-align:bottom; 
} 
#products tr 
{ 
text-align:center; 
color:#0000FF; 
} 
#products tr.alt td 
{ 
color:blue; 
background-color:#A7C942; 
} 

답변

1

내가 예상대로 작동하는 것 같군. 여기에 jsfiddle에 대한 약간의 테스트를 설정했습니다 http://jsfiddle.net/dttMd/. 다음 텍스트가 아래쪽으로 정렬되었음을 확인하기 위해 첫 행에 몇 줄 바꿈을 넣었습니다. 이것이 당신이 무엇이 아니 었으면 당신은 당신이 필요로하는 것이 무엇인지 명확하게 할 수 있습니다.

빈 셀에 대해서는 <span> 요소에 닫기 태그가 있어야하므로 잘못된 작업을 수행하고 있습니다. 내 개인적인 취향은 세포에 &nbsp;을 넣는 것입니다. 필자는 필연적으로 올바른 방법이 있다고는 생각하지 않습니다.

2

tdtableposition: relative을 사용할 수 있습니다. 그런 다음 bottom: 0px을 사용하여 td을 하단으로 이동하십시오.

그러나, 나는이 웹 사이트를 좀 더 명확하게 질문에 대답해야한다고 생각 : 당신이 td에서 7px 바닥 패딩을 가지고 있기 때문에 http://shouldiusetablesforlayout.com

1

있다고. 이것을

padding:3px 2px 0 5px; 

으로 바꿀 수 있으며, 간격은 없어집니다. 당신이 수직 정렬을 제공 한 HTML 및 CSS와

http://jsfiddle.net/6AAvH/2/

-1

tdvalign="bottom"을 추가하면 콘텐츠가 하단에 정렬되고 전 세계 모든 브라우저에서 지원됩니다.

희망이 도움이 될 것입니다.

0

패딩은 레이아웃과 높이/너비가 엉망이 될 수 있습니다. 귀하의 td에서 패딩을 제거하고 높이를 제공하십시오.

경우에 따라서 선의 높이가 위쪽이나 아래쪽에 정렬되지 않는 것처럼 보일 수 있습니다. 글꼴 크기가 컨테이너보다 작 으면 줄 높이를 상속 한 것일 수 있습니다. 줄 크기를 글꼴 크기 (또는 단지 line-height: 1)로 설정하고 td 높이를 지정하면 트릭을 수행해야합니다. 귀하의 <span>

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td> 

는 폐쇄 </span> 누락, 당신은 인라인 요소이기 때문에 공간을 차지하기 위해 범위를 사용해서는 안된다. 테이블의 경우 자리 표시 자도 필요하지 않지만 더 편한 경우 &nbsp;을 사용하거나 패딩/여백 스타일을 상속 받기를 원하면 해당 요소 ( <p>&nbsp;</p> 또는 <h3>&nbsp;</h3>)를 사용할 수 있습니다.