IMG가있는 CSS 열 헤더 - IMG/DIV를 오른쪽에 도킹하는 방법?

StackOverflow https://stackoverflow.com/questions/467603

문제

그리드보기에 열 헤더로 사용하는 HTML 테이블이 있습니다. 열 헤더를 클릭하면 그리드보기를 정렬하는 JavaScript를 트리거하고 열이 정렬되어 있음을 보여주는 아이콘이 아래와 비슷합니다.

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

테이블에는 테이블 레이 아웃이 있습니다 : 고정 및 텍스트의 범위에는 오버플로가 있습니다 : 숨겨진, 텍스트 오버 플로우 : 엘립스 스, 흰색 공간 : nowrap.

텍스트가 매우 길면, 내가 원하는 엘립스 시스 효과를 얻지 만, 정렬 아이콘 스프라이트 (너비와 배경 세트가있는 Div)가 테이블 셀의 오른쪽에서 잘린다. CSS를 통해 타원 텍스트보다 공간이 우선하는지 확인하는 방법은 무엇입니까? 열이 "정렬 된"경우, 정렬 IMG가 항상 거기에 있고 텍스트가 셀의 보이는 공간에서 IMG를 밀어내는 텍스트 대신 텍스트를 타원하는 것을 원합니다.

도움이 되었습니까?

해결책

이미지에 어떤 부유물을 추가하는지 잘 모르겠지만 오른쪽으로 떠 다니고 약 5 px의 오른쪽 마진을 추가하려고 했습니까? 그것은 그것을 안으로 밀어 넣을 것입니다.

다른 팁

왜 "Sortimgsprite"클래스를 <span> 대신 태그? 어쨌든 JavaScript를 통해 정렬을하고 있으므로 테이블 열에 대한 핸들이 있어야합니까?

사용자가 열에서 정렬하면 "SortimgSprite"클래스를 왼쪽 또는 오른쪽에 추가하고 (필요한 경우 작은 패딩을 추가 할 수 있음) 열이 더 이상 정렬되지 않을 때 제거하십시오.

... 아니면 내가 뭔가를 놓쳤습니까?

아. 나는 뭔가를 놓쳤다. 넘치는 텍스트는 헤더 자체가 아니라 열 헤더 아래의 줄에 있다고 생각했습니다.

자, 테이블 헤더에 클래스를 추가하면 어떨까요? 당신의 <th> 태그 (그것이 당신이 사용하는 것인 경우) 이미지가 셀 오른쪽에 정렬 된 다음 <span> 태그는 해당 클래스를 상속하고 다른 형식 (예 : 텍스트 오버 플로우 등)을 추가 할 수 있습니까?

다시 말하지만, 테이블 헤더 셀의 배경 이미지를 텍스트 뒤에서 명확하게 볼 수 있도록 스팬 오른쪽에 패딩이 필요할 수 있습니다.

추천에 감사드립니다! CSS를 통해 내가 원하는 것을 얻기 위해 내가 한 일은 다음과 같습니다.

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top