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

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

HTML 테이블에 가로 스크롤 바를 추가하는 방법이 있습니까?실제로 테이블이 어떻게 자라는지에 따라 세로와 가로 모두 스크롤이 가능해야 하는데 스크롤 바가 나타나지 않습니다.

일단은.display: block귀대의

그 다음, 세트overflow-x:로.auto.

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

깨끗하고 멋지군.불필요한 형식 지정 금지.

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

셀이 전체 테이블을 채우지 못하는 문제가 발생하면 다음과 같은 CSS 코드를 추가합니다.

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

CSS 해봤어요?overflow재산?

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

갱신하다
다른 사용자가 지적하는 것처럼 스크롤 바를 추가하기에는 충분하지 않습니다.
그러니 아래 댓글과 답변을 보시고 투표해 주시기 바랍니다.

다음 스타일로 설정된 테이블을 DIV로 래핑합니다.

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

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

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

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

이를 위해 CSS 속성 "overflow"를 사용합니다.

짧은 요약:

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

예.

table {
    overflow: scroll;
}

편집: @WickyNilliams는 display: 테이블 본문의 블록을 설정하면 의미론 테이블이 삭제되므로 접근성 문제로 인해 좋은 해결책이 되지 않는다고 언급했습니다.

@Serge Stroobandt가 제안한 해결책은 성공적이었지만 @Shevy가 셀을 사용하여 테이블의 전체 너비를 채우지 못하는 문제에 직면했습니다.저는 이 부분에 몇 가지 스타일을 추가함으로써 해결할 수 있었습니다.tbody.

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

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

이것은 Mac의 Firefox, Chrome, Safari에서 제게 효과가 있었습니다.

위의 어떤 해결책도 실행할 수 없었습니다.하지만 해킹을 발견했습니다.

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>

저도 같은 문제에 부딪치고 있었습니다.Chrome v31에서만 테스트된 다음과 같은 솔루션을 발견했습니다.

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

디브 안에 테이블을 삽입하면 테이블이 전체 길이가 됩니다.

HTML

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

CSS

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

이게 제게 효과가 있었던 겁니다.

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

.wrapper table {
  width: auto;
  min-width: 100%;
}

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

.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}

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

table얼마든지 가질 수 있는width. 주로 사용합니다.100%아니면max-content식탁에 올릴

저는 이전 해결책을 바탕으로 이 답을 알아냈고 그것은 의견이고 저만의 수정 사항을 추가했습니다.이것은 응답 테이블에 있는 저에게 적합합니다.

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;
}

테이블 위에 있는 '100% 이상의 폭'은 정말 저에게 잘 어울리게 해주었습니다.

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

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

부트스트랩 포함

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>

style="overflow-x:auto"로 div 요소에 태그 테이블 추가

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

제가 찾은 최고의 답은 다음과 같습니다. https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}

해결책이 좀 지나친 것 같습니다.가장 깨끗한 것은 디브로 포장하는 것입니다.

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

위의 모든 솔루션을 시도해 보았지만 몇 가지 문제가 있었습니다.

하면.display: 'block'테이블에, 셀들은 전체 폭을 차지하지 않습니다.테이블 포장지에 추가하면 검색, 필터 등의 사용자 정의 테이블 헤더도 스크롤되어 보기에 좋지 않습니다.

는 를 을 할 수 .overflow-x: auto테이블의 본체 포장지까지.

셀은 열 수가 적더라도 전체 너비를 가지며 필요에 따라 스크롤 막대가 자동으로 나타납니다.

을 하여,display:block;테이블에 있는 것은 좋지 않습니다.이 스레드에서 대부분의 답을 시도했지만 원하는 대로 작동하는 것은 없었습니다.HTML이 다음과 같이 구성된 경우:

<div>
  <table>
    <tbody>

부모 디브를 수평으로 스크롤할 수 있도록 하려면 다음을 시도해 볼 수 있습니다.

.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto;
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

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

<div class="x-auto">
  <table class="table text-left">
    <tbody>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
      </tr>
      <tr>
        <td>Some short text!</td>
        <td>Some really long text, like really really really really really really really really really really really really long!</td>
      </tr>
    </tbody>
  </table>
</div>

//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-a-horizontal-scrollbar-to-an-html-table