테이블 colspan이 다르게 보입니다

저는 2 행 3 열의 테이블을 가지고 있으며 colspan=2을 1x2 cell과 2x1 cell으로 설정하고 싶습니다. 그러나 출력이 예상했던 것과 다른 것처럼 보입니다.테이블 colspan이 다르게 보입니다

예상 하나 enter image description here

그러나 같이있어 출력 : 여기에 enter image description here

는 HTML입니다 :

<!DOCTYPE HTML PUBLIC> 
<html> 
<body> 
    <table border=1 cellpadding=0 cellspacing=0 width=100%> 
    <tr> 
     <td >1x1</td> 
     <td COLSPAN=2>1x2</td> 
    </tr> 
    <tr> 
     <td COLSPAN=2>2X1</td> 
     <td>2x2</td> 
    </tr> 
    </table> 
</body> 
</html>

누군가는을 달성하는 데 도움이 수 예상 밖의 테이블과 칼 스판을 사용하여 넣으시겠습니까?

출처

2014-09-18 Rama Rao M

는 다음 CSS 클래스를 추가

table { 
    table-layout: fixed; 
}

FIDDLE

출처

2014-09-18 12:55:25 Danield

굉장 해요! 작동합니다.하지만 실제로 의미하는 것은 무엇입니까? –

거기에 슬롯이 다른 슬롯과 공유하고 있기 때문에 두 번째 열에 대한 제로 폭을 필요로하는 테이블에 아무것도 없다 . 이것을 처리 할 수있는 다양한 방법이 있습니다.

@ Danield의 답변 에서처럼 table-layout: fixed을 설정하면 강제로 문제가 해결됩니다. fixed table layout. 이 알고리즘은 CSS 나 HTML로 표현 된 너비 요구 사항이없는 경우 사용 가능한 공간을 열에 균등하게 나눕니다. 짝수 구분이 원하는 경우 ("예상"이 다소 차이 있음), 이것은 가장 간단한 방법입니다.

또 다른 방법은 너비를 명시 적으로 설정하는 것입니다. 이 경우 그냥 심지어 분열을하려는 경우에 불필요하게 서투른

td { 
    width: 33.33%; 
} 
td[colspan=2] { 
    width: 66.67%; 
}

(jsfiddle 참조). 하지만 예를 들면 (other jsfiddle 참조) 열 너비는 다음을 사용할 수 있습니다 25 %, 50 %, 25 %로 :

<style> 
col { 
    width: 25%; 
} 
col:nth-of-type(2) { 
    width: 50%; 
} 
</style>

... ...

을 이런 경우에, 그것을 (여러 열을 차지할 수도있는) 셀의 너비를 설정함으로써 간접적으로 직접적으로 (열 스타일 col 요소로) 열에 대한 너비를 직접 설정하는 것이 더 쉽습니다.

출처

2014-09-18 13:56:28

테이블 colspan이 다르게 보입니다

답변

관련 문제