수평 스크롤 - HTML 레이아웃

내가 정확히 자식 테이블 T1의 폭에 둘러싸 DIV 태그 "C"의 폭을 설정 한 http://jsfiddle.net/RRkC7/수평 스크롤 - HTML 레이아웃

에서 참조하시기 바랍니다. 그러나 가로 스크롤 막대로 인해 세로 스크롤 막대가 나타납니다. 이상적으로 "c"의 너비가 "t1"과 정확히 같기 때문에 가로 스크롤이 나타나서는 안됩니다.

그리고 이것을 피하는 방법에 대한 아이디어.

아무 것도 하드 코딩 할 수 없습니다. 더 많은 내용이 추가 될 때 inner TABLE의 너비가 증가 할 수 있으며,이 경우 container div 태그의 크기가 조정됩니다.

또한 테이블의 너비가 특정 숫자를 초과하는 경우 가로 및 세로 스크롤 막대를 모두 표시해야합니다.

감사합니다, 아룬

<div id="p" style="overflow:hidden"> 
    <div id="c" style="overflow:auto"> 
     <table id="t1"> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
      <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr> 
     </table> 
    </div> </div>

출처

2013-02-12 Arun

는 C의 사업부에 대한 폭을 지정 및 C 사업부의 폭을 상속 할 경우 테이블 있도록 테이블에 대해 어떤 폭을 정의하지 않습니다. 이제 테이블에 대한 오버플로 속성을 가지고 놀아보십시오. 그래서 스크롤바는 테이블이 더 많은 데이터를 얻고 그 너비가 c div에 정의 된 것보다 많을 때만 나타납니다.

overflow:scroll;

출처

2013-02-12 02:02:20

패딩 때문일 수도 있지만 잘 모르겠지만 자바 스크립트를 수정하면 효과가 있습니다.

$(function(){ 
    $("#c").width($("#t1").width() + 20); 
    $("#c").height(150); 
})

http://jsfiddle.net/RRkC7/1/

나는 테이블 내부의 요소와 주변 연주와 폭은

출처

2013-02-12 02:06:05 kylecblyth

그것은 폭에서 고정 된 금액을 추가하거나 빼서에 대해 있지만 나타났습니다 있지 않다면 잘 변경 CSS padding: 5px은 div의 너비를 패딩의 2 배 증가시키고 padding-left과 padding-right이 그림에 나타날 것입니다. 따라서이 경우에는 10px의 정확한 채우기량을 추가해야합니다.

당신은

$(function(){ 
    var toBeWidth = $("#t1").width() + (parseInt($("#t1").css("padding-left").split("px")[0])*2) 
    $("#c").width(toBeWidth); 
    $("#c").height(150); 
});

같은 폭과 패딩을 계산할 수

출처

2013-02-12 04:50:56

수평 스크롤 - HTML 레이아웃

답변

관련 문제