2012-09-04 4 views
0

enter image description here큰 텍스트를 표에 표시하는 가장 좋은 방법은 무엇입니까?


나는/표시 내 웹 사이트의 사용자 정보를 편집 할 수있는 테이블이 있습니다. 각 사용자에 대해 하나의 행. 나는 각 사용자에 대해 300 자의 의견을 갖고있다. 그러나 주석을 오른쪽으로 표시하면 테이블에 너무 많은 공간이 필요합니다. 아마 자바 스크립트를 사용하여 주석을 표시하거나 숨길 필요가 있습니다. 댓글을 표시하는 가장 좋은 방법은 무엇입니까? 편집이 가능해야하므로 아마 teaxtarea 태그 여야합니다.

기술적 인 질문이 아니라 디자인의 기본 질문입니다. 커다란 코멘트 섹션을 전문적인 방식으로 표시해야합니다.

+0

나는 jQuery.show()/숨기기() 유혹 또는 각 행에 기호 나 무언가를 클릭 ... – jtheman

+0

@jtheman처럼, 텍스트 영역에 팝업을 사용하십시오 첫 번째로드? – Aperture

답변

5

첫째, 당신은 심각하게 제공 선폭 무엇이든 취하도록 테이블을 설정 : 테이블 요소에 table-layout:fixed을 설정합니다.

그런 다음 "설명"열에 대해 결정된 너비를 설정하십시오. 가장 쉬운 방법은 <colgroup><col /><col />...</colgroup> 설정 (<thead>, <tbody> 또는 먼저 <tr> 앞에 넣고 환경 설정 순서대로 지정)입니다.

뿐만 아니라 "코멘트"열에 폭을 설정,이 스타일을 추가 :

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 

이 자동으로 올바른 크기로 텍스트를 자릅니다.

다음으로 모든 것을 보여줄 수 있어야합니다. 할 수있는 일은 onclick 이벤트를 사용하여 텍스트를 포함하는 텍스트 영역으로 텍스트를 대체하는 것입니다. 기본 DOM 조작만으로도 충분합니다.

+0

안녕하세요. 화면 캡처를 추가했습니다. 모양을 사용할 수 있습니까? – Aperture

+0

나는이 접근법을 좋아한다. 내가 만든 유일한 변화는 jquery.tooltip을 사용하여 마우스를 올리면 tootip에 데이터를 표시하는 것입니다. –

1

enter image description here

나는 3 행과 300 픽셀 폭 및 오버 플로우와 텍스트 영역으로 이동하기로 결정했습니다 : 텍스트가 큰 경우는 스크롤 할 수 있도록, 자동차,하지만 잘 테이블 맞습니다. 그래서 태그 당신이 때 페이지에 배치해야합니까 :

관련 문제