테이블의 배경 크기 덮개

테이블에서 배경 크기 표지를 사용하려고하고 내가 얻은 결과가 나타나지 않습니다.테이블의 배경 크기 덮개

페이지 (가장 좌측 열을 포함하지 않음) http://jsfiddle.net/pp9st63L/1/

.image th { 
    background-size: cover !important; 
    height: 300px; 
    width: auto; 
}

데이터 열은 동일한 폭해야하지만, 열의 개수는 가변적이다. 때로는 3 및 다른 시간 4 (왼쪽 표제 란 포함).

이러한 데이터 열의 너비는 배경 이미지가 포괄 할 수있는 크기와 같아야합니다. 다른쪽에 긴 데이터가있는 경우. 현재 열 너비는 순수하게 열의 데이터와 관련이 있습니다. 이 동작을 CSS로 재정의하고 열의 최대 너비를 설정하여 폭을 동일하게 만들고 싶습니다. 따라서 배경 크기 커버가 작동합니다.

이 방법을 사용하는 방법에 대한 의견이 있으십니까?

출처

2014-12-01 Martin

http://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table?answertab=active#tab-top – Pevara

display:block과 max-width을 그냥 삭제하면 table cell에 width을 사용하십시오. background-size:cover이 저에게 효과적입니다. '아름다운'경우 images에 background-position:50% 50% 또는 background-position:50% 0px을 사용할 수도 있습니다. table-cells의 경우 width 속성 (30% 30% 30% 또는 30px 30px 30px 30px)은 항상 width과 동일하게 설정해야합니다.

P. 내 아주 나쁜 영어로 미안해.

UPD 또한 tr { td {...} } 오류라고, 제 col

Example

UPD

2 체크하신 width 세트. tr td {...}을 사용해야합니다. 또한 설정 한 이미지 속성의 경우 background-image 속성을 tags에 사용해야합니다. 그리고 width:auto 너비가 좁은 열에 대해 width 세트를 사용하여 테이블의 다른 모든 공간에 너비를 설정할 필요가 없음을 보여주기 위해 특별히 작성했습니다. width (table-cell)은 min-width입니다. 따라서 cells의 텍스트는 width을 변경할 수 있습니다. 그러나 it은 하이픈으로 바꿀 수 있습니다 (word-wrap).

Example 2

출처

2014-12-01 22:43:45 CnapoB

감사 @cnapoB - 당신이 제거하면 그 네 번째 열의 제목 열 (왼쪽 하나)이 더 이상 좁지 않음 (> 너비 : 60px) http://jsfiddle.net/pp9st63L/5/ – Martin

@Martin UPD2를 참조하십시오. – CnapoB

감사합니다. – Martin

테이블의 배경 크기 덮개

답변

관련 문제