테이블 열을 선택 가능하게 만드는 XHTML/CSS/Javascript 방법?

Question

행을 정렬해야하는 표 형식의 데이터를 표시하기 위해 간단한 TABLE을 사용하고 있지만 표 내용을 선택하는 경우 사용자가 각 열 내에서만 선택할 수 있도록해야합니다. 기본 브라우저 동작은 모든 열에서 행으로 선택하는 것이지만 열 내에서만 선택을 허용해야합니다.

행 대신 테이블을 열로 정의하는 멋진 새 CSS 또는 XHTML 1.0 방법이 있었으면 브라우저에서 선택을 강요하기를 바랬습니다. 이것이 가능하지 않다는 것을 알고 있으며, 브라우저 선택을 무시하기위한 자바 스크립트 선택 방법을 만들어야 할 것입니다. 분명히 Google 스프레드 시트와 같은 자바 스크립트 스프레드 시트 위젯은 필자가 필요로하는 행과 열 내에서 선택을 허용하지만 프로토 타입에 기반한 그리드 유형 위젯을 찾거나 내 자신의 기능을 작성하기를 바라고 있습니다.

위 열 선택 사항이 내장 된 위젯에 대한 팁이나 링크는 무엇입니까? 이 작업과 같은 것을 만들기위한 HTML/CSS 트릭이 있습니까?

Answer 1

나는 무엇을 의미하는지 모르겠다. 그러나 당신이 다른 칼럼과 다르게 하나의 칼럼을 채색 할 수 있기를 원하는 것처럼 보인다. 가장 간단한 방법은 COLGROUP과 COL 태그를 사용하는 것입니다 : CSS 속성의 하위 집합 만 있습니다 http://www.webmasterworld.com/forum83/6826.htm

에서 도난

CSS

.name {width:5em;background:#ccc;} 
.value {width:3em;text-align:center;color:#f00;} 
.comment {text-align:right;} 

HTML

<table> 
<caption>My Test Table</caption> 
<col class="name"> 
<colgroup class="value" span="3"></colgroup> 
<col class="comment"> 
</colgroup> 
<tr> 
<th>Name</th> 
<th>Value 1</th> 
<th>Value 2</th> 
<th>Value 3</th> 
<th>Comment</th> 
</tr> 
<tr> 
<td>Bob</td> 
<td>Yes</td> 
<td>No</td> 
<td>42</td> 
<td>I like cheese</td> 
</tr> 
<tr> 
<td>Susan</td> 
<td>No</td> 
<td>Yes</td> 
<td>42</td> 
<td>Sharp Cheddar</td> 
</tr> 
</table> 

코드를 그 열에 설정할 수 있습니다. W3C는 list of those입니다.

Answer 2

당신은 사용자가 테이블에 클릭 할 경우에만 열을 강조하려는 경우, 당신은 쉽게 할 수있는 사용 jquery

$("table td").bind('click',function(){ 
      $("table td").css('background',''); 
      $(this).css('background','green'); 
     }); 

Answer 3

사용 COLGROUP 태그 - http://www.w3schools.com/tags/tag_colgroup.asp

당신은 당신이 원하는 어떤 스타일을 적용 할 수 있습니다 전체 열에. 마우스를 움직일 때 스타일을 변경하는 것은 jquery에서 수행 할 수 있습니다 ... 다른 답변의 스크립트를 사용할 수 있지만 "table colgroup"으로 "table td"선택기를 대체하십시오.