비정상적인 테이블 행 크기 조정

나는 세 개의 행과 HTML 테이블을 갖고 싶어. 중심 열 (B)은 내용에 맞게 가능한 한 작게 높이를 조정해야합니다. 상부 및 하부 행 (A 및 C)의 크기를 그 높이가 동일 높이로 표 의 높이의 나머지 부분을 채우는 것이다. 비정상적인 테이블 행 크기 조정

은 XAML에서 이것은 Grid를 사용하고, 각각의 행 *을 A, B, C 및 높이 *, Auto주는 의해 이루어진다.
는 내가 HTML/CSS에 각각 높이 50%, auto 및 50%를 사용했습니다. 하지만 이로 인해 A 열이 테이블 높이의 절반을 채우게되고 B와 C가 아래쪽 절반을 채 웁니다.

어떻게 행 높이 얻을 수 나는/CSS를 HTML을 사용하여 원하는?

출처

2013-08-13 Timothy Shields

나는이 자바 스크립트의 몇 줄없이 행할 수없는, 나 때문에이 시도 적이 없다. 낙담하지 않고 평범한 구식 html/css로 높이 문제를 처리하는 것은 쉽지 않다고 말합니다. – AdityaSaxena

설정 높이가 소정 로우의 셀에 1em한다.

HTML :

<table class="testing"> 
    <tr id="one"><td>one</td></tr> 
    <tr id="two"><td>two<br/>two two</td><div id="breakme"></div></tr> 
    <tr id="three"><td>three</td></tr> 
</table>

CSS :

.testing { 
    color: white; 
    font-weight: bold; 
    height: 300px; 
} 

#one td { 
    background-color: red; 
} 

#two td { background-color: blue; height: 1em } 

#three td { background-color: green; } 

#breakme { 
    background-color: pink; 
    margin: 5px; 
    height: 30px; 
}

예 : http://jsfiddle.net/a65vn/1/

출처

2013-08-13 04:04:43 tuespetre

보다 일반적 auto' '높이의 A와 C의 행을 떠나 일을 할 것 B에 고정 된 높이를 설정하는 단계를 포함한다. –

참. 1px도 작업을 수행합니다. 저자는 수축 할 수있는 무엇인가가 필요했습니다. – tuespetre

<style type="text/css"> 
    .tbl{ 
    display:table; 
} 
    .row{ 
    display:table-row; 
} 
    .height40{ 
    height:40%; 
} 
    .width0{ 
    width:100%; 
} 
    .height-main{ 
    height:200px; 
} 

</style> 


<div class="tbl width0 height-main"> 
    <div class="row height40"> 
    A 
    </div> 
    <div class="row"> 
    B 
    </div> 
    <div class="row height40"> 
    C 
    </div> 
</div>

참고 : 당신은 두 개의 행으로 인해 & C 50 %의 폭을 사용할 수있다 3 행이고 B 행은 약간의 공간이 필요합니다.

출처

2013-08-13 04:27:07

비정상적인 테이블 행 크기 조정

답변

관련 문제