Twitter 부트 스트랩의 반응 형 테이블 처리

다음 페이지와 같이 테이블의 너비가 범위의 너비를 초과하는 경우 : http://jsfiddle.net/rcHdC/

테이블의 내용이 span.

이 사건을 처리하는 가장 좋은 방법은 무엇입니까?

이제 Bootstrap 3 에는 즉시 반응 형 테이블이 있습니다. 만세! :)

여기에서 확인할 수 있습니다. https://getbootstrap.com/docs/3.3/css/#tables-responsive

<div class="table-responsive">테이블 주변을 추가하면 다음과 같이하는 것이 좋습니다.

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

모든 레이아웃에서 작동하도록하려면 다음을 수행하십시오.

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

사용 가능한 한 가지 옵션은 fooTable입니다. 반응 형 웹 사이트에서 잘 작동하며 여러 중단 점을 설정할 수 있습니다. fooTable Link

반응 형 테이블을 처리 할 때 수행 할 수있는 작업에는 여러 가지가 있습니다.

개인적으로 Chris Coyier의이 접근 방식을 좋아합니다.

• http://css-tricks.com/responsive-data-tables/

여기에서 다른 많은 대안을 찾을 수 있습니다.

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

Bootstrap을 활용하여 신속하게 무언가를 얻을 수 있다면 클래스 이름 ".hidden-phone"및 ".hidden-tablet"를 사용하여 일부 행을 숨길 수 있지만이 방법은 대부분의 경우에 가장 좋습니다. 추가 정보 ( "반응 형 유틸리티 클래스"참조) :

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Bootstrap 3 이하를 사용하는 경우 파일을 업데이트하여 모든 해상도에 반응 형 테이블을 적용 할 수 있습니다.

tables.less

또는이 부분 덮어 쓰기 :

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

와:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

첫 번째 줄 @ screen-XX 값을 어떻게 변경했는지 확인하십시오.

모든 테이블을 반응 형으로 만드는 것은 그다지 좋지 않을 수 있지만 큰 테이블 (많은 열)에서 LG까지이를 활성화하는 것이 매우 유용하다는 것을 알았습니다.

누군가에게 도움이되기를 바랍니다.