테이블 너비/높이를 결정하는 자바 스크립트

다른 해상도에서 유동적으로 만들기 위해 테이블 너비/높이를 정의하는 데 사용하려고하는 JavaScript가 있습니다. 너비에 대해서는 잘 작동하는 것처럼 보이지만 높이에 대해서는 작동하지 않습니다. 올바른 숫자를 올바른 변수로 설정하면 테이블의 높이를 설정하지 않습니다. 여기에 내가 무엇을 가지고 ..테이블 너비/높이를 결정하는 자바 스크립트

<html> 
<head> 
<script type="text/javascript"> 
var viewportwidth; 
var viewportheight; 
var tablewidth; 
var tableheight; 
if (typeof window.innerWidth != 'undefined'){ //set's viewport width/height into respective variables 
       viewportwidth = window.innerWidth, 
       viewportheight = window.innerHeight 
     }else if (typeof document.documentElement != 'undefined' 
      && typeof document.documentElement.clientWidth != 
      'undefined' && document.documentElement.clientWidth != 0){ 
       viewportwidth = document.documentElement.clientWidth, 
       viewportheight = document.documentElement.clientHeight 
     }else{ 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight 
     } 
function asdf(){ 
tablewidth = Math.round(viewportwidth/100*70); //sets table width to 70% of viewport width 
tableheight = Math.round(tablewidth/100*74); //sets table height to 74% of table width, this number is ambigous 
document.getElementById('poop').innerHTML = tableheight+', '+tablewidth+', viewport width is '+viewportwidth+'x'+viewportheight; 
document.getElementById('container').width = tablewidth; 
document.getElementById('container').height = tableheight; 
} 
</script> 
</head> 
<body onload="asdf();"> 
<span id="poop"></span> 
    <table id="container" cellpadding="0" border="1" cellspacing="0" width="" height=""> 
     <tr><td colspan="5"></td></tr> 
     <tr> 
      <td width="38%"></td> 
      <td width="12%"></td> 
      <td width="21%"></td> 
      <td width="14%"></td> 
      <td width="15%"></td> 
     </tr> 
    </table> 
</body> 
</html>

누구나 내가 뭘 잘못하고 있는지 보여?

출처

2012-08-11 cream

이 수도 있습니다 작업을

var width = document.getElementById('container').style.offsetWidth; 
    var height = document.getElementById('container').style.offsetheight;

출처

2012-08-11 09:30:02

테이블에 스타일이없는 경우 -------------> var width = document.getElementById ('TableID'). offsetWidth; –

왜 CSS를 사용하지 않으시겠습니까?

#container { 
    width: 70%; 
    height: 74%; 
}

출처

2012-08-11 07:02:17 Blender

좋은 질문을 해보십시오 확인할 수 있습니다. 나는 내가 이런 식으로하는 미친 사람처럼 보이지만 실제적인 이유가 있음을 압니다. 불필요한 세부 사항에 들어가기가 쉽습니다. – cream

매일 새로운 기술이 추가되기 때문에 ... 사실 우리는 많은 CSS 미디어를 만들거나 모든 브라우저와 호환되지 않는 끔찍한 종횡비 코드로 조건을 가져올 자유 시간이 없습니다 ... 적어도 확실합니다 모든 기기에서 모바일 및 태블릿에서도 자바 스크립트를 사용할 수 있습니다. –

자바 스크립트에는 아무런 문제가 없습니다. <table> 요소에 height 특성을 넣을 수 없다는 것을 알지 못 했으므로 <td> 요소에 있어야합니다.

I 확인, 폰갭에서, 높이 간단한 테이블 = 100 % 수행 CSS에서 HTML의 화면 크기에없는 크기, 내부 또는 DIV의 외부 등 ...

내 솔루션 이 게시물에서 영감을 얻었습니다. 신체 높이를 통해 표의 높이를 계산하고 각 표에 각 표에 픽셀을 배포했습니다.
는 프레 젠 테이션, 높이 행당 2 개 세포, 테이블의 3 행, 그래서/

내 경우

var body = document.body, 
    html = document.documentElement; 

var height = Math.max(body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight); 


/* this is a Topcoat navigation bar and I get its height via offsetHeight of the surrounding <div> */ 
var hTopBar = document.getElementById("pgTopBar").offsetHeight; 

var sH = Math.floor((height - hTopBar)/3); 


document.getElementById("td1").height = sH; 
document.getElementById("td2").height = sH; 
document.getElementById("td3").height = sH; 
document.getElementById("td4").height = sH; 
document.getElementById("td5").height = sH; 
document.getElementById("td6").height = sH;

이 코드는 이전에 설명되어 있습니다 * 은 /, 잘 작동 그냥 완료 여기에
입니다 * 테이블 높이의 33 %.

//With small change, which you are missing 
document.getElementById('container').style.width = tablewidth+"px"; 
document.getElementById('container').style.height = tableheight+"px";

입니다 자바 스크립트 코드

출처

2012-08-11 07:06:57 cream

작업 당신은 fiddle demo

출처

2012-08-11 07:31:58

테이블 너비/높이를 결정하는 자바 스크립트

답변

관련 문제