테이블 오버플로시 가로 스크롤

테이블 오버플로시 가로 스크롤

---

컨테이너에 기본 테이블이 있습니다. 테이블에는 약 25 개의 열이 있습니다. 테이블 오버플로에 가로 스크롤 막대를 추가하려고하는데 정말 힘든 시간을 보내고 있습니다.

현재 일어나고있는 것은 테이블 셀이 셀의 높이를 자동으로 조정하고 고정 된 테이블 너비를 유지하여 셀 내용을 수용하고 있다는 것입니다.

이 문제를 해결하는 방법에 대해 내 방법이 작동하지 않는 이유에 대한 제안에 감사드립니다.

미리 감사드립니다!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS 바이올린 (참고 : 가능한 경우 가로 스크롤 막대가 빨간색 테두리가있는 컨테이너에 있어야 함) : http://jsfiddle.net/ZXnqM/3/

---

나는 당신의 오버플로가 외부 용기에 있어야한다고 생각합니다. 열의 최소 너비를 명시 적으로 설정할 수도 있습니다. 이렇게 :

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

바이올린 : http://jsfiddle.net/5WsEt/

---

귀하의 질문을 심하게 오해하지 않는 한 overflow-x:scroll에서 .search-table로 이동하십시오 .search-table-outter.

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

내가 아는 한 테이블 자체에 스크롤바를 줄 수는 없습니다.

---

아무도 언급하지 않은 해결책 white-space: nowrap은 테이블에 사용 overflow-x하고 래퍼에 추가 하는 것입니다.

( http://jsfiddle.net/xc7jLuyx/11/ )

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

HTML

<div class="wrapper">
    <table></table>
</div>

여러 줄로 된 행을 원하지 않는 경우 이상적인 시나리오입니다. 줄을 추가하려면<br/> .

---

   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

div에 스크롤을 제공해야합니다.

---

모바일 용 반응 형 사이트에서는 모든 것이 상대 div에 절대 위치해야합니다. 그리고 고정 된 높이. 관련성을 위해 설정된 미디어 쿼리입니다.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }

참조 URL : https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table