CSS 스팬 높이 100 % 테이블 내

테이블이 있습니다.
테이블 안에 난 <a class="available">available</a>,
하지만 높이가 전체 테이블 행을 커버하지 않는 것 같습니다.CSS 스팬 높이 100 % 테이블 내

HTML :

<table with="100%" class="list_table"> 
<tbody> 
<tr> 
<td><a class="available">Available</a></td> 
<td><a class="booked"><span>Nose to mouth</span><span>Frown Lines</span></a></td> 
</tr> 
</tbody> 
</table>

CSS :

.list_table thead th, .list_table tbody td { border:1px solid #D3D9CB; font-size:12px; position:relative !important;} 
.available { background:#98AEB3; display:block; height:100%;} 
.booked { background:#F2AE30; }

화상이 첨부되어

alt text

출처

2011-01-11 tonoslfx

이미지에서 텍스트의 높이만 덮고 있기 때문에 한 줄 이상 사용하면 모든 요소에 대해 동일한 높이를 얻을 수 없습니다. – Nabab

.available { background:#98AEB3; display:block; height:100%;padding:0;margin:0;}

경우,745 작동합니다, 라인 높이 픽셀 주위

.available { background:#98AEB3; display:block; height:100%;line-height:18px;}

재생을 조정할 :

는 추가 시도, 도움이되지 않습니다.

출처

2011-01-11 13:59:36

A 및 SPAN은 블록 요소가 아니므로 너비와 높이가 없어야합니다. 또한 높이를 100 %로 지정하는 것은 모든 브라우저에서 같은 방식으로 해석되지 않습니다.
셀 내용의 배경색을 바꾸고 싶다면 A 태그 대신 .available 및 .booked 클래스를 지정하는 것이 좋습니다.

출처

2011-01-11 13:59:51 Nabab

a와 span이 블록 요소가 아닌 경우 OP는 CSS에서 이것을 변경했습니다. – Kyle

그리고 링크가 전체 셀 (셀의 아무 곳이나 클릭 할 때 작동)을 덮도록하려면 링크를 제거하고 셀에 onclick 함수를 추가하십시오. – Nabab

그는 CSS의'a'에'display : block'을 가지고 있습니다. 그러나 가장 좋은 해결책은 anchor 태그를 쓰지 않고'available' 클래스를'td'에 두는 것입니다. – Dan

CSS 스팬 높이 100 % 테이블 내

답변

관련 문제