어떻게 내용이 겹치지 않고 두 테이블을 정렬합니까?

Win XP에서 최신 버전의 Firefox와 Chrome을 사용하고 있습니다. 같은 수평면에 두 개의 테이블을 표시하고 싶습니다. 그러나 문제가 있습니다. 지금은 첫 번째 테이블의 내용이 100 픽셀보다 큰 있기 때문에어떻게 내용이 겹치지 않고 두 테이블을 정렬합니까?

<table width="100" style="display: inline-block;"> 
    ... 
</table> 
<table width="100" style="display: inline-block;"> 
    ... 
</table>

그러나, 지금, 두 테이블이 중복 있습니다. 너비를 변경하지 않고 누구나 내가 스타일을 변경/추가 할 수 있으므로 두 번째 테이블이 첫 번째 테이블의 오른쪽에 나타나지만 첫 번째 테이블의 내용은 모두 지워지는 것을 알 수 있습니까?

감사합니다, - 데이브

당신은 단지 첫 번째 테이블에 overflow: hidden 설정할 수 있습니다 원칙적으로

출처

2012-01-11 Dave

테이블 텍스트 또는 이미지의 내용 은요? 편집 :'width' : 100px;를'style' 안에 넣지 않았습니까? – Biotox

'float' 사용 - http://css-tricks.com/all-about-floats/ –

위의 스타일 속성에 "float : left"를 추가했지만 겹침이 여전히 발생합니다. 당신이 특별히 말한 것은 무엇입니까? 또한, 왜 당신은 코멘트에 대답을 입력 했습니까? – Dave

하지만, IE (심지어 IE 9)이 경우 제대로 구현하지 않습니다.

<style> 
.tablediv { display: inline-block; width: 100px; overflow: hidden } 
</style> 

<div class=tablediv> 
<table> 
    ... 
</table> 
<div class=tablediv> 
<table> 
    ... 
</table>

이 방법, 할당 폭에 맞지 않는 테이블 중 하나의 내용은 렌더링 결석 완료 : 해결 방법은 div 요소에 테이블을 포장하고 그들에 관련 속성을 설정하는 것입니다. 그래서 그것은 원하는 것보다 더 효과적 일지 모르지만,이 점에 관해서는 분명하지 않습니다.

출처

2012-01-12 14:35:17

첫 번째 표가 100 픽셀보다 넓지 않은 경우 첫 번째 표를 그대로두고 두 번째 표에 절대 위치를 지정할 수 있습니다.

표시 속성을 변경하지 않으면 작업이 중단됩니다.

출처

2012-01-12 14:43:09

어떻게 내용이 겹치지 않고 두 테이블을 정렬합니까?

답변

관련 문제