너비 100 % + 가로 및 세로 스크롤

내 사이트의 너비는 100 %입니다. 내 사이트에는 와이드 테이블이 포함되는 경우가 많으며 때로는이 테이블이 (뷰포트의) 100 %보다 넓어지는 경우가 있습니다.너비 100 % + 가로 및 세로 스크롤

이렇게되면 가로 스크롤 막대가 나타납니다 (완전히 자연 스럽습니다). 그러나 가로로 스크롤 할 때 메뉴가 가장 넓은 테이블의 너비를 따르지 않습니다.

나는 인터넷에서 사용할 수있는 다양한 코드 예제를 시도했지만 아무도 내게 도움이되지 못합니다. 아래는 내 최신 코드이며, 메뉴의 고정 된 위치 때문에 가로 스크롤과 함께 작동합니다. 그러나 페이지가 "높게"올라가고 세로 스크롤이 필요할 때 메뉴는 항상 원래의 뷰포트 위치 (다시 말해 자연스러운 동작)로 표시되고 고정됩니다.

가로로 스크롤 할 때처럼 이제는 세로로 스크롤 할 때 정상적으로 작동하는 방식이 있습니까?

누구든지 의견이 있으면 감사 할 가치가 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     .myTable { width: auto; float: left; width: 100%; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 

     .myMenu { text-align: center; background: #666666; float: left; width: 100%; height: 30px; margin-bottom: 20px; color: #fff; } 
     .myMenu ul { margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; width: 300px; list-style-type: none; text-align: center; } 
     .myMenu ul li { float: left; padding: 5px 20px 5px 20px; } 

       body       { margin:0; padding:50px 0 0 0; } 
       div#header      { top:0; left:0; width:100%; height:50px; position: fixed; } 
       * html body      { overflow:hidden; } 
       * html div#content  { height:100%; overflow:auto; } 

    </style> 
</head> 
<body> 
     <div id="header"> 
       <div class="myMenu"> 
         <ul> 
           <li>Item 1</li> 
           <li>Item 2</li> 
           <li>Item 3</li> 
         </ul> 
       </div> 
     </div> 
     <div id="content"> 
       <table class="myTable"> 
         <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
             <tr> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
           <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
         </tr> 
       </table> 
     </div> 
</body> 
</html>

편집 : 나는 그것을 IE8에서 작동하도록 관리하지만, IE7은 여전히 실제로 폭이 변화하는 것과 같은 질병 :(

는 IE8에서 작동하게 무엇을 앓고 : 100 %;로 최소 폭 : 100 % ;,하지만 IE7 동의하지 않는 것

누구나

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     body { margin: 0px; padding: 0px; } 
     #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #myMenu { width: auto; min-width: 100%; background: #666; float: left; margin-bottom: 15px; } 
     #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; } 
     #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; } 

     .myTable { width: auto; float: left; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 
     #filter { margin-bottom: 10px; border: 1px solid red; height: 50px; min-width: 100%; float: left; } 

    </style> 
</head> 
<body id="myBody"> 
<div id="container"> 
    <div class="myMenu" id="myMenu"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
    <div id="filter"> 
some content 
    </div> 
      <table class="myTable potential"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 
    <table class="myTable potential" id="myTable"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</ 

td> 
     </tr> 
    </table> 

    </div> 
</body> 
</html>

출처

2010-11-26 iafiawik

메뉴를 변경하거나 (메뉴 높이를 변경하는 경우처럼) 가장 넓은 테이블의 너비에 따라 증가 시키시겠습니까? – Bazzz

안녕하세요, 메뉴가 화면 너비의 100 %를 덮고있는 것처럼 시각적으로 보이는 한 내게는별로 중요하지 않습니다. 메뉴 위치를 이동하는 것이 좋습니다. – iafiawik

어쩌면 요점을 놓치고 싶지만 Firefox 3.6.12 Chrome 7.0.517.44, IE 8 및 http://jsfiddle.net/RfWCd/에서 코드를 시도해 보았습니다. 가로 스크롤 막대가 만드는 것과 같은 결과를냅니다. 테이블이 왼쪽으로 이동하는 것처럼 보입니다. 메뉴는 그대로 유지되므로 뷰포트의 100 %를 채 웁니다. 문제를 재현하는 방법을 알려주시겠습니까? 아니면 귀하의 요구 사항을 오해하고 있습니까? – Bazzz

답변 : 시간과 노력의 일 후

, 나는 마침내 목적이었다 모두 IE7/IE8에서 일했다. 유일한 제한은 테이블이 너무 넓을 때 메뉴가 중앙에 오지 않는 IE7에 해당됩니다.

해결 방법은 폭 대신에 최소 너비를 사용하는 것이 었습니다.이 방법은 내용이 뷰포트 외부로 커지지 만 내용이 뷰포트보다 작 으면 전체 화면을 계속 덮을 수있게합니다. 미래에 다른 사람이 같은 끔찍한 문제에 직면하는 경우

나는 여기에 코드를 게시 할 예정입니다 : 지원을위한

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 

    <style type="text/css"> 
     body { margin: 0px; padding: 0px; min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; } 
     #myMenu { background: #666; float: left; min-width: 100%; } 
     #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; } 
     #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; } 

     .myTable { width: auto; float: left; color: #666; border: 2px solid #666; } 
     .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; } 
     #filter { background: yellow; } 

html>body #myMenu { *min-width: auto; background: #666; *float: none; margin-bottom: 15px; } 


    </style> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
</head> 
<body id="myBody"> 
<div id="container"> 
    <div class="myMenu" id="myMenu"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
    <div id="filter"> 
some content 
    </div> 
      <table class="myTable potential"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 
    <table class="myTable potential" id="myTable"> 
     <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
       <tr> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
      <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td> 
     </tr> 
    </table> 

    </div> 
</body> 
</html>

감사합니다!

출처

2010-12-02 10:22:03 iafiawik

최선을 내가 연주하는 정 후 함께 올 수 있습니다.? 본문과 div.myMenu에서 동일한 명시적인 너비를 사용합니다 (예 : 1800px 또는 150em). 그러나 이렇게하려면 와이드 테이블이있는 페이지와 대략 얼마나 넓은 페이지를 알 수 있어야합니다. 문제가 있습니다. 내 자신의 질문에

출처

2010-11-26 13:34:45

불행히도 테이블의 데이터가 동적이기 때문에 그것은 저에게 맞는 해결책이 아닙니다. – iafiawik

div.myMenu를 높이로 설정 한 다음 1 픽셀 너비의 이미지에서 div와 동일한 높이와 색상을 사용하여 배경을 가짜로 만듭니다. –

그럴 수도 있었지만 메뉴 항목이 중앙에 있어야합니다 (해당 솔루션에서는 그렇지 않습니다). – iafiawik

너비 100 % + 가로 및 세로 스크롤

답변

관련 문제