방지하는 방법 행이 균등

내가 스팬 행은 다음과 같이 찾고있는 테이블이 테이블에 수직으로 배포되고 :방지하는 방법 행이 균등

+----------+---------+ 
| Spanned | Row A | 
| row  |   | 
| (several +---------+ 
| lines of | Row B | 
| text) |   | 
+----------+---------+

행 A와 B의 내용은 수직 상단 정렬을하지만 행은 또한 스팬 된 행과 동일한 높이를 갖도록 세로로 고르게 분산됩니다. 제가 결과이 instread처럼 오티 원한다

이다

+----------+---------+ 
| Spanned | Row A | 
| row  +---------+ 
| (several | Row B | 
| lines of |   | 
| text) |   | 
+----------+---------+

, 전 행 A는 수직으로 확장 가능한 유일한 행 B만큼 작게하고 싶다. 이 작업을 수행 할 수 있습니까? 나는 최소 높이를 포함하여 CSS를 통해 다양한 스타일을 시도했지만 행은 항상 고르게 분포되어있는 것처럼 보입니다. 실제로는 A와 B보다 많은 행이 있습니다. 마지막 행만 실제 내용을 넘어서 수직으로 확장하려고합니다. 모든 행에서 실제 콘텐츠 양을 예측할 수 없으므로 명시 적으로 높이를 설정하면 작동하지 않습니다.

출처

2013-09-11 Thomas Michanek

마크 업 및 관련 CSS를 제공해주십시오. 사람들은 당신에게 구체적인 답을 줄 가능성이 훨씬 큽니다. – Marco

"행 A"의 높이를 20 %로 설정하고 "행 B"를 80 %로 설정합니다. 그게 효과가있다. – Jacques

Jack. 행에 얼마나 많은 콘텐츠가 있는지 모르기 때문에 높이를 고정 값 또는 상대 값으로 설정할 수 없습니다. 셀의 실제 내용에 관계없이이를 수행하는 일종의 자동 방법을 찾고 있습니다. –

두 번째 열의 마지막 셀을 제외한 모든 셀에 대해 <td style="height:1%"> 세트를 사용해보십시오. 적어도 Firefox에서는 완벽하게 작동합니다.

http://jsfiddle.net/Sy6vH/

출처

2013-09-11 13:23:11 krystian

테이블에서이 값을 사용하면 예상대로 작동하지 않습니다. –

그것은 당신의 HTML 마크 업없이 답변을 조금 어렵다. 하지만 원하는 동작은 Chrome에서 기본 동작 인 것 같습니다.

행의 고정 높이를 설정하고 마지막 행을 "자동"으로 설정하여 나머지 테이블 높이가 채워지도록해야합니다.

<html> 
    <head> 
     <style type="text/css"> 
     table td { 
      border: 1px solid black; 
      width: 200px; 
      vertical-align: top; 
     } 

     table tr { 
      height: 1.2em; 
     } 

     table tr.last { 
      height: auto; 
     } 

     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
      <td rowspan="2">Several lines of text. Lorem ipsumLorem ipsum dolor sit amet, consectetur  adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> 
       <td>Line A</td> 
      </tr> 
      <tr class="last"> 
       <td>Line B</td> 
      </tr> 
     </table> 
    </body> 
</html>

주 대신 내가 지원할 수 있도록하려면 브라우저를 무엇 따라 사용 "마지막"클래스의 CSS 의사 클래스를 사용할 수 있습니다 : 파이어 폭스

, 나는이 코드를 사용 .

출처

2013-09-11 13:34:03 Kaidjin

이것은 테이블 작동 방식의 한계 내에서 수행 할 수있는 최선의 방법입니다. –

CSS의 사양에 따라 : 둘 이상의 행에 걸쳐 셀이 포함 된 행 높이의 합이 셀을 포함하기에 충분히 커야한다는 점을 제외하고 행 높이 계산에 영향을 미치는 방법을 지정하지 않습니다

CSS 2.1 행을 스패닝합니다.

참조 : http://www.w3.org/TR/CSS2/tables.html#height-layout

그러나, 당신은 다음과 같은과의 긴밀한 올 수 있습니다. 예를 들어

, 당신은 4 행 테이블이있는 경우 :

<table> 
    <tr> 
     <td rowspan="4">The left stuff...</td> 
     <td >Row A and some more text for demo.</td> 
    </tr> 
    <tr> 
     <td >Row B</td> 
    </tr> 
    <tr> 
     <td >Row C</td> 
    </tr> 
    <tr> 
     <td class="last">Row D</td> 
    </tr> 
</table>

는 다음과 같은 CSS를 적용 : td 높이 작은 길이 값을 설정

table { 
    border: 1px dotted blue; 
    width: 300px; 
    table-layout: fixed; 
} 
td { 
    vertical-align: top; 
    height: 10px; 
} 
td.last { 
    background-color: beige; 
    height: auto; 
}

합니다. 표 셀은 높이 값을 최소값으로 처리하므로 작은 값은 축소 또는 축소 효과를 모방합니다.

마지막 (맨 아래) 테이블 셀의 경우 height: auto을 설정하면 셀의 높이가 확장됩니다. CSS 규격에서 이것이 작동해야하고 결과가 브라우저에 달려 있다는 것이 명확하지 않다. (나는 Firefox에서 테스트했다.)

에서 데모보기 : http://jsfiddle.net/audetwebdesign/jrCHj/

출처

2013-09-11 13:34:06

아쉽게도 내 코드에서 작동하지 않습니다. 코드를 별도의 메시지로 업로드하려고합니다. –

바이올린이 작동하므로 일부 스타일 시트에서 놓친 간단한 것이 있어야합니다. –

나는이 질문에 대해 정말로 바보 같지만 코드를 어떻게 제공합니까? 코드를 붙여넣고 여기 "메뉴"에서 코드를 적용하려고하면 각 줄에 4 칸을 추가하라는 오류가 나타납니다 ??? –

방지하는 방법 행이 균등

답변

관련 문제