셀에 백분율 너비가있는 셀을 인라인 블록 요소 안에 넣는 방법

CSS 스타일 "display : inline-block"이있는 컨테이너 내에 테이블을 만들고 싶습니다. 표는이 상자의 다른 콘텐츠만큼 넓어야하지만 넓지 않아야합니다. 예제의 표에는 3 개의 셀이 있습니다. 첫 번째 셀은 내부 내용만큼 넓어야합니다. 두 번째는 30 % (사용 가능한 너비의)를 얻고 세 번째 것은 70 % (사용 가능한 너비)를 얻어야합니다.셀에 백분율 너비가있는 셀을 인라인 블록 요소 안에 넣는 방법

이 (이 그것을 같이하는 방법입니다) 파이어 폭스에 대해 잘 작동 :

This works fine for firefox

을 다음과 같은 마크 업 사용 :

<div> 
    This text sets the width for the display: inline-block container.<br /> 
    Table should not get wider than this. 
    <table> 
     <tr> 
      <td>Small</td> 
      <td width="30%">30%</td> 
      <td width="70%">70%</td> 
     </tr> 
    </table> 
</div>

및 CSS :

div { display: inline-block; } 
table { width: 100%; } 
td { background-color: green; }

을 (바이올린 : http://jsfiddle.net/SuperNova3000/Z7Car/)

위의 예를 사용하면 Chrome이 실패합니다 (표의 너비는 100 % + Cellspacings이고 창처럼 넓습니다). IE10에서는 테이블이 100 % (셀프 페이싱없이) 얻을 것입니다.

이 작업을 수행 할 수있는 방법이 있습니까? 그것은 웹 사이트를위한 레이아웃이 아니며 유연해야하는 형식 컨테이너 (다른 백분율 값을 갖는 "작은"행 추가)를위한 것입니다. 이것은 단순화 된 버전입니다.

나는 모든 브라우저에서 작동하는 일반 HTML 및 CSS 솔루션을 찾고 있습니다.

이에 테이블 셀을 변경 :

<td width="1">Small</td> 
<td>30%</td> 
<td>70%</td>

는 "작은"세포를 존중하는 레이아웃을 생성한다. 그러나 나는 30 %/70 % 컬럼을 작동시키는 방법을 찾을 수 없다. 어떤 제안?

출처

2014-06-24 SuperNova

설정 '박스 크기를 참조하십시오에 대해 : 경계 상자를, 외부 사업부에'. – thebjorn

@thebjorn 아무것도 바뀌지 않는 것 같니? div에는 margin/padding/border가 없습니다. – SuperNova

흠 .. FF의 버그처럼 보입니다. From (http://www.w3.org/TR/CSS21/visuren.html) : "인라인 블록의 내부는 블록 상자 형식으로되어 있으며 요소 자체는 원자 수준의 인라인 수준 상자 형식으로되어 있습니다. "div는 너비가 없으므로 테이블은 너비를 제한하는 가장 가까운 포함 요소의 30 %/70 %를 차지해야합니다 (적어도 읽는 방법은 해당). – thebjorn

어떻게 div { inline-table }를 사용하기보다는 div { inline-block }

이 http://jsfiddle.net/Z7Car/3/

출처

2014-06-24 06:41:08 Alohci

아주 좋은! 인라인 테이블을 알지 못했습니다 .. – webkit

OMG, 그렇게 간단한 것은 아닙니다 ...하지만 모든 최신 브라우저에서 작동하는 것 같습니다. 나는 그것에 대해 결코 생각하지 않았다. 내 마음 속에는 테이블이 셀을 가져야하므로 인라인 테이블 세트가있는 div에는 셀이 있어야합니다. 매력처럼 일하고. 나는이 대답을 받아 들일 것이다. – SuperNova

셀에 백분율 너비가있는 셀을 인라인 블록 요소 안에 넣는 방법

답변

관련 문제