HTML 테이블에 가로 스크롤 막대 추가

HTML 테이블에 가로 스크롤 막대 추가

---

HTML 테이블에 가로 스크롤 막대를 추가하는 방법이 있습니까? 실제로 테이블이 커지는 방식에 따라 세로 및 가로로 스크롤 할 수 있어야하지만 스크롤 막대를 표시 할 수는 없습니다.

---

CSS overflow속성 을 사용해 보셨습니까 ?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

업데이트
다른 사용자가 지적했듯이 이것은 스크롤 막대를 추가하기에 충분하지 않습니다 .
따라서 아래의 의견과 답변을보고 찬성하십시오.

---

먼저 display: block테이블을 만들어

그런 다음로 설정 overflow-x:하십시오 auto.

table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

좋고 깨끗합니다. 불필요한 형식이 없습니다.

다음은 내 웹 사이트의 페이지에서 스크롤 테이블 캡션과 관련된 예제입니다 .

---

다음 스타일로 설정하여 테이블을 DIV로 랩핑하십시오.

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

---

이를 위해 CSS 속성 " overflow "를 사용하십시오.

짧은 요약:

overflow: visible|hidden|scroll|auto|initial|inherit;

예 :

table {
    display: block;
    overflow: scroll;
}

---

나는 같은 문제에 부딪쳤다. Chrome v31에서만 테스트 된 다음 솔루션을 발견했습니다.

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

---

위의 솔루션 중 어떤 것도 작동하지 못했습니다. 그러나 나는 핵을 발견했다.

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}

<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

---

이것은 Serge Stroobandt의 답변을 개선 한 것으로 완벽하게 작동합니다. 열이 적을 경우 전체 페이지 너비를 채우지 않는 테이블 문제를 해결합니다.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>

---

@Serge Stroobandt가 제안한 솔루션으로 성공했지만 @Shevy가 셀에 문제가 발생하여 테이블의 전체 너비를 채우지 못했습니다. 에 스타일을 추가하여이 문제를 해결할 수있었습니다 tbody.

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

이것은 Firefox, Chrome 및 Mac의 Safari에서 저에게 효과적이었습니다.

---

I figured out this answer based on previous solution and it's comment and added some adjustments of my own. This works for me on the responsive table.

table {
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  // make fixed table width effected by overflow-x
  max-width: 100%;
  // hide all borders that make rows not filled with the table width
  border: 0;
}
// add missing borders
table td {
  border: 1px solid;
}

---

The 'more than 100% width' on the table really made it work for me.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

---

//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

참고URL : https://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table