오버플로가 자동 일 때 배경색이 확장되지 않습니다.

Question

overflow-x auto가있는 div 컨테이너의 일부인 div에 배경색을 설정하고 싶습니다. 스크롤 할 때만 볼 수있는 텍스트를 div가 래핑하도록 허용하려면 어떤 스타일을 적용해야하는지 잘 모르겠습니다. display : block을 설정하면; (여기 http://jsfiddle.net/u7ah3/1/ 예) 을

<div id="container"> 
     <div class="section"> 
      <div class="title">First</div> 
      <div class="data"> 
       <table class="table"> 
        <tr> 
         <td> 
          First of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Second of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Third of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Fourth of the rows and all that data 
         </td> 
        </tr> 
       </table> 
      </div> 
      <div class="title">Second</div> 
      <div class="data"> 
       <table class="table"> 
        <tr> 
         <td> 
          First of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Second of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Third of the rows and all that data 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Fourth of the rows and all that data 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 

그러나 스크롤 할 때 나는 (400 ~ 200)에서 다음 #container의 폭을 줄이면 수평 한 사업부 주위에 포장되지 않은 것을 볼 수 있습니다 : 그것은 눈에 보이는 무엇이든에 사업부를 설정하는 것입니다 본문. display : inline-block으로 시도했지만 컨테이너가 섹션 블록보다 넓은 경우 작동하지 않습니다.

감사합니다.

Answer 1

td의 스타일을 지정하지 않는 이유는 무엇입니까?

.table, td { 
    min-width:300px; 
    background:#bbb; 
} 

또한,에 min-width을 설정해야합니다 귀하의 section divs 당신은 같은 포함했다 : 내가 바로 질문을 이해 생각 http://jsfiddle.net/SinisterSystems/u7ah3/7/

:

.section { 
    min-width:300px; 
} 

JS 바이올린 . 내가 잘못한 것이 있으면 더 이상 도움을 줄 수 있다면 언제든지 말씀해주십시오.