조정 가능한 열이있는 HTML 표를 어떻게 만듭니 까?

Question

열 너비를 조정할 수있는 테이블을 만드는 방법을 알고 싶습니다. 나는 이것을하는 방법을 알아 내지 못했습니다. 이 기술에 대한 비밀스런 소스를 알고 있다면 알려주세요.

Answer 1

셀 헤더 가장자리의 영역에서 마우스 클릭 이벤트를 캡처 한 다음 마우스를 끌 때 동적으로 열 너비를 변경하는 것이 간단하다고 생각합니다.

Answer 2

Yahoo UI (YUI) data table 위젯을 사용하면 열의 크기를 조정할 수 있습니다. 공개적으로 사용할 수 있지만 아직 베타 버전이며 YUI 라이브러리는 상당히 부피가 큽니다. 디폴트 HTML 테이블에는 그러한 종류의 기능이 없기 때문에 모든 구현은 JavaScript/DHTML에 있어야합니다.

Answer 3

Outlook의 효과를 찾으십니까? 아니면 테이블의 크기를 조정하는 데 표시되는 <이 있습니까?

• 내가 한 일은 div 픽셀이나 몇 픽셀 너비의 셀로 만들어졌습니다.
• 화살표가되도록 커서를 바꿉니다. < ->.
• 해당 div 컨트롤을 통해 사용을 클릭하십시오.
• 해당 div 컨트롤을 통해 사용을 클릭하면 해당 위치를 표시 할 다른 '부동'div를 즉석에서 작성합니다.
• 자바 스크립트에서 움직임이 마우스 이동 이벤트에 연결됩니다.
• 일단 컨트롤을 놓으면 새로운 컨트롤을 이동 한 위치에 따라 표 셀 높이 또는 너비를 조정합니다.

Answer 4

"몇 가지 foobar html 속성 사용"과 같은 간단한 대답은 없습니다. 이것은 자바 스크립트 및 DOM 조작으로 수행됩니다.
Prototype에서이 기능의 구현을보고 싶다면 TableKit을 살펴보십시오.
거기에 jQuery 구현이 있다고 확신합니다. 내 좋은 프로토 타입을 좋아합니다.)

Answer 5

Flexigrid for jQuery는 꽤 멋지게 보입니다.

업데이트 : - :

$('#myTableID').flexigrid(); 

사용이 ... 그러나 가장 기본적인 예를 들어, 자세한 사항은 사이트를 참조 정말 간단 바와 같이 @ 빈센트의 의견에 따라 스크립트를 포함 그런 다음 테이블에 기능을 훅

이나와 옵션 :

$('.classOfTables').flexigrid({height:'auto',striped:false}); 

Answer 6

이 테이블의 열을 조절 너비하려면이 CSS를 추가 ...

th {resize:horizontal; overflow:auto;}