HR 브레이크 설정 클래스 TD colspan

데이터를 표시하기위한 중첩 테이블 배열이 있습니다. 중첩 테이블을 모든 상위 테이블 열에 걸쳐있는 TD에두기를 원합니다. 그래서 나는 colspan을 설정했습니다. 그러나 나는 또한 사용자가 부모 데이터를 숨기거나 보이게하기 위해 클릭 할 수 있기를 원한다. IE8에서는 정상적으로 작동하지만 FireFox와 Chrome에서는 중첩 테이블이 colspan을 무시하고 첫 번째 열에 만 뿌려집니다.HR 브레이크 설정 클래스 TD colspan

아래 코드는 문제의 예입니다. 첫 번째 열 텍스트를 클릭하면 무슨 뜻인지 알 수 있습니다. 데이터의 마지막 행은 분류되지 않으므로 페이지로드시 확인이 표시되지만 클래스가 설정되면 다시 잘못됩니다.

의견이 있으십니까?

감사합니다.

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<script type="text/javascript"> 
function expandRow(rowID, clickRow) 
{ 
    var item = document.getElementById(rowID); 
    if(item.className=='hidden'){ 
     item.className = 'unhidden'; 
    }else{ 
     item.className = 'hidden'; 
    } 
} 
</script> 
<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; } 
</style> 
<title>Table Test</title> 
</head> 
<body> 
<table> 
    <thead> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
     <th>Col4</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id30"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id95"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td> 
     <td>This one</td> 
     <td>displays ok</td> 
     <td>until you set the class!</td> 
    </tr> 
    <tr id="id96"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

출처

2009-09-01 javadeveloper

전적으로 귀하의 숨김 클래스를 제거하기 CSS의이 부분을 변경 - 완전히 중복입니다.

item.className = '';

을하지만 일반적으로 내가 대체 추천 : 대신이 경우, 그것은 자연 상태의에 그것을 반환 할 수 있도록 요소에서 숨겨진 클래스를 제거

item.className = item.className.replace(/\bhidden\b/gi,'');

(그리고 FWIW를, 개인적으로 나는 왜 그냥 전부 스타일을 제거하지 마십시오) 가시성 속성을

출처

2009-09-01 16:12:54 annakata

감사합니다. 해결책은 매우 눈부 셨다. 내가 게시하기 전에 생각하지 않은 것은 당황 스러웠다. 숨겨진 오버 사용에 대한 귀하의 의견도 의미가 있으므로, 나는 그것을 동시에 정렬 할 것입니다. – javadeveloper

변화 숨김 해제에 대한 CSS 라인 : .unhidden { display: table-row; }

블록은 TRS에 대한 잘못된 스타일입니다.

출처

2009-09-01 16:07:57

.unhidden 클래스는 특정 요소 유형에만 유용하며 이전 브라우저는 값을 인식하지 못합니다. 일반적인 클래스를 일반적으로 유용하게 유지하는 것이 좋습니다. – annakata

은

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display:; } 
</style>

출처

2009-09-01 16:10:05

* 구문 분석하지 않으므로 전혀 규칙이 없다는 효과가 있습니다. – annakata

을 처리하기위한 예약 것이다 "숨겨진"보다 더 의미 론적으로 올바른 "제거"찾을 :

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { } 
</style>

출처

2009-09-01 16:24:04 Keith

난 그냥

.vis { 
    display: block; 
    display: table-row; 
}

올드 인터넷 익스플로러가 table-row을 무시

를 선언하여이 정보를 사용하여, 그것을 해결. Firefox 및 Internet Explorer 8에서 사용합니다.

출처

2010-09-27 19:05:27 user459835

HR 브레이크 설정 클래스 TD colspan

답변

관련 문제