CSS 표시하지만 행 높이 유지

테이블을 사용하여 일부 데이터를 표시하고 한 행에 대해 더 긴 문자열 (가능하면)의 35 자 미리보기를 표시합니다. 사용자가 미리보기 중 하나를 마우스로 가리키면 옆에 전체 텍스트가 표시됩니다.CSS 표시하지만 행 높이 유지

문제는 전체 텍스트가 표시되고 tr 높이가 전체 텍스트에 맞게 변경되었지만 동일한 크기로 유지되기를 원할 때 발생합니다.

<td><a href="link.asp?tid=<%=ID%>" onmouseover="showDetails(<%=ID%>);"><%=shortPreview%></a> 
<br/><div class="details" style="display:none;" id="<%=ID%>"><%=rsTickets("details")%></div></td>

CSS

.details { 
    position:relative; 
    top:-15px; 
    left:260px; 
    background-color:#FFFFAA; 
    z-index:1; 
    padding-top:5px; 
    padding-bottom:5px; 
    padding-right:15px; 
    padding-left:5px; 
    border:1px; 
    border-style:solid; 
    border-color:#CCCC99; 

    -moz-border-radius: 1em 2em 2em 1em; 
    border-radius: 1em 2em 2em 1em; 
}

출처

2013-03-20 David Starkey

은 세포 내부에 고정 된 크기의 사업부를 넣고 position: relative로 설정합니다. 해당 div 내부 귀하의 세부 사항을 넣고 position: absolute;로 설정하십시오. 이것은 99 %에서 작동합니다.

출처

2013-03-20 21:30:04 ZorleQ

작동하지 않았습니다. ''및'

' –

셀에 고정 높이를 설정하고 오버 플로우를 추가합니다. 도움이 될지도 몰라. – ZorleQ

행 스타일 :'style = "height : 10px; overflow : hidden;" –

개체는 상대 개체로 설정하면 주변 개체와 관련이 있습니다. 즉, div의 높이를 변경하면 (또는이 경우 표시) 주위의 객체가이 변경에 적용됩니다. 따라서 div를 눈으로 보이게 설정하면 캡슐화 된 td가 높이를 변경합니다.

div를 절대 위치로 설정하면 문제가 해결되지만 오른쪽으로 배치하기가 어려울 수 있습니다. 다른 div에 넣지 않는 한. 상대 div 안에 절대 div를 넣으면 절대 div가 relavite div에 절대적이므로 문제를 해결할 수 있습니다. 예를 들면 다음과 같습니다.

<table> 
    <tr><td><div style=position:relative> 
      This div will not affect the td more than will this text. 
      <div style=position:absolute;top10px;> 
       This div will not affect the td, since it's absolute, and will be 
       10px from the top of the outer div 
      </div> 
    </div></td></tr> 
</table>

이 트릭을 수행해야합니다. 적어도 나를 위해 일합니다.

출처

2013-03-20 22:09:46 Psyberion

이 경로를 사용하면 콘텐츠를 테이블 외부에 배치 할 수 있습니다. 또한, 나는 여러 옵션을 테이블의 여러 행에 대한 가변 길이 옵션이 필요합니다, 나는 전체 텍스트를 표시하지 않는 것이 좋습니다 동일한 화면에 각 옵션에 대한 화면, 비록 카운터가 도움이 될 것이라고 가정합니다. 발행물. –

CSS 표시하지만 행 높이 유지

답변

관련 문제