그림에 따라 표 크기 조정

div 안에 배경 이미지가 있습니다. 검색 막대를 위에 놓으려는 배경 이미지를 선택했습니다. 어쨌든, 배경 이미지 아래에, 그것은 헤더 역할을, 나는 테이블을 배치. 머리글은 화면 너비에 따라 크기가 조정됩니다. 테이블 너비는 동일합니다. 그러나 화면 크기가 줄어들면 머리글과 표 사이의 거리가 늘어납니다. 왜 이런 일이 발생하고 어떻게 해결할 수 있는지 아는 사람이 있습니까?그림에 따라 표 크기 조정

데모 : 여기

<div class= "resize"> 
    </div> 
<div class="table-container"> 
<h3>Latest Job Postings</h3> 
<table class = "table table-striped table-bordered table-centered"> 
    <tr> 
    <th class="description">Description</th> 
    <th class="location">Location</th> 
    </tr> 
    <td>[description]</td> 
    <td>[Location]</td> 
</table> 
</div> 
</div> 
</div> 

My CSS 
/*resize container */ 
    .resize{ 
    background-image: url("header.png"); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    margin-top: 80px; 
    height: 350px; 
} 

/* table */ 
.table-container { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 500px; 
} 


th.description { 
    width: 80%; 
} 

th.location { 
    width: 10%; 
    }

출처

2014-07-15 user3208597

설명하는 내용을 재현 할 수 없습니다. '

'과 '

...

'사이의 수직 간격이 더 큽니 까? – EternalHour

예, 화면의 크기를 조정할 때 이미지와 표 사이에 수직 간격이 있습니다. – user3208597

다음 시도하십시오 내 HTML입니다 jsFiddle

문제는 당신이 헤더 섹션에 대한 background-size:100%을 설정 한 것입니다,이 원인이됩니다 모두 너비에 따라 크기를 조정할 배경 이미지의 너비와 높이.

따라서 창 크기를 조정하면 배경 이미지의 너비가 변경되고 그에 따라 높이도 변경됩니다. 컨테이너의 높이가 고정되어 있기 때문에 배경 이미지의 높이가 낮아지면 그 아래에 간격이 생깁니다. 내가 무슨 짓을

배경 이미지의 높이가 일정 할 것이

background-size: 100% 350px;

이처럼되고 배경 크기의 속성을 변경하는 것입니다와 폭은 컨테이너 폭의 변화에 대응합니다.

출처

2014-07-15 01:46:28 Dola

좋아,이 작품은 나를 위해. 그러나 화면 높이에 따라 이미지 높이를 변경하고 싶습니다. 이미지와 테이블 사이의 거리가 동일하게 유지되는 동안 이미지의 높이가 계속 변경되는 방식이 있습니까? – user3208597

고정 된 높이를 사용하지 않으면 이러한 방식으로 작동해야합니다. – EternalHour

@EternalHour 높이를 제거하면 화면의 크기를 조정할 때 이미지와 표 사이의 간격이 다시 증가합니다. – user3208597

그림에 따라 표 크기 조정

답변

관련 문제