요소에 대한 "Width : Auto"와 동등한 CSS 선언이 있습니까?

StackOverflow https://stackoverflow.com/questions/1625999

  •  06-07-2019
  •  | 
  •  

문제

나는 만들려고 노력하고있다u003Ctable> 그것은 어떤 크기의 경계도 있더라도 특정 너비를 초과하지 않습니다 (500px).

일반적으로 내가하는 경우 :

(HTML)

<div>
  <table>
    <tr>
      <td>This is a test.</td>
    </tr>
  </table>
</div>

(CSS)

div {
  width: 500px;
}
table {
  width: 100%;
  border: 10px solid #000;
}

나는 끝날 것이다u003Ctable> 왼쪽과 오른쪽 경계의 절반이 바깥쪽에 있기 때문에 폭은 510px입니다.u003Cdiv> . 내가 원하는 것은 au003Ctable> 폭은 500px입니다 총 (즉, 부모/컨테이너의 너비를 초과하지 않습니다). 따라서 왼쪽과 오른쪽 경계는 각각 10px 너비이며 500px 넓이 내부에 설정됩니다.u003Cdiv> - 따라서 테이블의 나머지 콘텐츠 영역은 480px입니다.

나는 이런 종류의 일을 쉽게 할 수 있습니다.u003Cdiv> CSS 선언 "너비 : 자동"을 사용함으로써. 나는 추가를 추가하여 테이블로 가짜를 할 수 있습니다.u003Cdiv> 그 주위에 테두리가 설정된 "너비 : 자동"을 사용합니다.u003Cdiv> ,u003Ctable> .

그러나 더 우아한 솔루션이 존재하기를 바라고 있습니다 (교차 브라우저 여야합니다). 내가 모르는 것이 있습니까?

도움이 되었습니까?

해결책

DIV의 너비를 480px로 설정하고 10px 테두리를 넣으십시오. 그런 다음 테이블을 100% 너비로 설정하십시오

다른 팁

그것이 작동하는지 확실하지 않지만 ... 테이블 자체 대신 첫 번째 (왼쪽 테두리)와 마지막 (오른쪽 테두리) TDS (또는 TR)를 경계에 올릴 수 있습니까? 그것은 동일한 시각적 결과를 제공해야합니다.

그렇지 않으면, 나는 래퍼 div에 대해 많은 수면을 잃지 않을 것입니다.

크로스 브라우저 솔루션이 있는지 모르겠습니다. IE Box 모델은 실제로 원하는 방식으로 작동합니다. 요소의 너비를 선언하면 너비가 나고, 패딩 마진과 테두리의 "내부"너비에서 빼기 위해 선언 된 너비를 제공합니다.

다른 모든 브라우저는 반대쪽으로 수행합니다. 요소 너비를 선언 된 너비로 설정 한 다음 마진 패딩과 테두리를 추가합니다.

방금 IE7과 Firefox 3.5에서 코드를 테스트했으며 10px 검은 색 테두리에서도 폭이 500px 인 것으로 보입니다. 내가 걱정할 수있는 오래된 버전의 Firefox입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top