테이블 셀 안의 전체 높이 테이블

HTML 테이블로 생성해야하는이 프로젝트에서 작업이 중단되었습니다.테이블 셀 안의 전체 높이 테이블

페이지에는 2 개의 행이있는 외부 테이블이 있습니다. 머리글/브랜딩 셀과 두 번째 테이블이 들어있는 셀입니다.

이 표는 앱에 의해 동적으로 생성되며 여러 행과 열을 가질 수 있습니다. 응용 프로그램은 요청 된 행과 열의 수를 결정하고 이에 따라 html을 출력합니다.

모든 생성 된 셀은 다른 테이블을 제목 행과 내용 행이있는 "위젯"으로 보유합니다 (아래 그림 참조). 내용 행에는 SVG 차트가 있습니다.

<table class="widget"> 
     <tbody> 
      <tr id="trtitlewidget22"> 
       <td id="titlewidget22" class="widget-header"><h3>Enquiries</h3></td> 
      </tr> 
      <tr> 
      <td class="widget-content" id="widget22"> 
        [this would be a js svg chart] 
      </td> 
      </tr> 
     </tbody> 
    </table>

Here is a fiddle of the whole layout 뺀 차트

는 (ⅰ 필러 텍스트를 사용). 여기에 스크린 캡입니다 : 내가해야 할 일은

enter image description here

페이지 크기가 조절되고 같은 "위젯 표는"항상 그 바깥 쪽 테이블 셀을 채우기 테이블이 휘어 가지고있다. 나는 아무 소용이없는 높이 100 %를 시도했다.

출처

2014-05-20 Steve

난 당신이 곧 자신을 떨어진 얻을 수 있기를 바랍니다. – BoltClock

어쨌든 설정 높이 : .widgets-container의 100 %가 나를 위해 작동합니다 : http://jsfiddle.net/BoltClock/5LeK6/1 (선택기 중 하나를 고쳤으며'table # index> td'가 있어야합니다. '테이블 # 인덱스> tbody> tr> td' - [이 질문] 참조 (http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child- selector)) – BoltClock

div에 내부 테이블을 래핑 할 수 있습니까? 아니면 앱 생성기를 망칠 수 없습니까? – LcSalazar

저는 CSS 전용 솔루션을 찾을 수 없습니다. 나는 자바 스크립트 접근법에 대해 갈 것이다. JQuery를 사용하면 쉽게 할 수 있습니다. 당신이 그것을 바닐라를 원하는 경우, 수 중 하나

var fitHeight = function() { 
    $("table.widget").each(function() { 
     $(this).removeAttr("style"); 
    }); 

    //It has to be separate from the remove loop, so the height will be re-applied. 
    $("table.widget").each(function() { 
     $(this).height($(this).parent().height()); 
    }); 
} 

$(window).resize(fitHeight); 
$(document).ready(fitHeight);

http://jsfiddle.net/5LeK6/5/

출처

2014-05-20 18:21:31 LcSalazar

테이블 셀 안의 전체 높이 테이블

답변

관련 문제