2014-12-01 4 views
0

중첩 테이블에 문제가 있습니다. 우리 회사에는 테이블 레이아웃을 기반으로하는 오래된 웹 사이트가 있습니다. 나는 역동적으로 새로운 td를 하나의 tr에 추가하려고합니다. 이 td가 설정되면, 다른 tr에서 나는 마지막으로 colspan = 2로 설정합니다. 이렇게하면 내 테이블은 다음과 같이 보입니다.중첩 테이블의 Colspan 스타일링이 실패했습니다.

| - | - | ------- | - | --- | - - - - |

| - | - | ------- | - | --- | - | - | - |

| - | - | ------- | - | --- | - | - | - | 대신 다음과 같이 보는

:

| --- | - | ---- | - | --- | - | ----- |

| --- | ---- | - | --- | - | ----- |

| --- | ---- | - | --- | - | ----- |

(- 오직 정의 폭과 열 병합하지)

이 내 코드의 샘플 마크 업입니다 :

<table border="0" width="100%" cellspacing="0" cellpadding="1"> 
    <tbody> 
     <!-- Headline tr --> 
     <tr> 
      <td width="100%" valign="middle" nowrap align="left" colspan="7"> 
       Titel 
      </td> 
      <!-- New dynamic Field --> 
      <td nowrap align="right"> 
       <img src="example.gif" width="15px" height="15px"/>    
      </td> 
     </tr> 
     <tr> 
      <td nowrap align="left"> 
       Name 
      </td> 
      <td> 
       : 
      </td> 
      <td width="50%" align="left"> 
       <input readonly value="test" /> 
      </td> 
      <td > 
       <img src="blank.gif" /> 
      </td> 
      <td nowrap align="left"> 
       Number 
      </td> 
      <td> 
       : 
      </td> 
      <td width="100%" align="left" colspan="2"> 
       <input readonly value="test" /> 
      </td> 
     </tr> 
     <tr> 
      <td nowrap align="left"> 
       Name 
      </td> 
      <td> 
       : 
      </td> 
      <td width="50%" align="left"> 
       <input readonly value="test" /> 
      </td> 
      <td > 
       <img src="blank.gif" /> 
      </td> 
      <td nowrap align="left"> 
       Number 
      </td> 
      <td> 
       : 
      </td> 
      <td width="100%" align="left" colspan="2"> 
       <input readonly value="test" /> 
      </td> 
     </tr> 
     <tr> 
      <td nowrap align="left"> 
       Name 
      </td> 
      <td> 
       : 
      </td> 
      <td width="50%" align="left"> 
       <input readonly value="test" /> 
      </td> 
      <td > 
       <img src="blank.gif" /> 
      </td> 
      <td nowrap align="left"> 
       Number 
      </td> 
      <td> 
       : 
      </td> 
      <td width="100%" align="left" colspan="2"> 
       <input readonly value="test" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
이 테이블은 <table width="100%" height="100%">

This is what it looks like

있는 테이블에 중첩되어

무슨 일이야?

답변

0

동일한 상위 테이블의 행 (tr)에 다른 수의 td를 사용할 수 없습니다. 예제에서 첫 번째 행에는 8 (7 + 1) 개의 TD가 있고 두 번째 행에는 7 (5 + 2) 개의 TD 만 있습니다. 테이블을 부러 뜨릴 수 있습니다.

+0

안녕하세요, 내 마크 업에서 예. 공간 td를 잊어 버렸습니다. 내 마크 업을 편집하여 이제 6 + 2가되었습니다. – Tanktiger

+0

정확한 문제를 해결할 수 있습니까? 비율 문제 만? –

+0

예, 마지막 화면에서 colspan = 2를 수행하면 스크린 샷처럼 보입니다. 만약 하나만 설정하면 td는 colspan = 2를 가지지 않는다. colspan없이이 모든 것을 제외하고는 모든 것이 예상된다. 나는 이유를 모른다. – Tanktiger

0

나는이 문제를 해결했다. 내 첫 번째 행에서 colspan = 7 인 첫 번째 td는 width = "100 %"가 필요하지 않습니다. 이제는 기능적입니다.