Footable이 작은 장치에있을 때 열 요약

Question

테이블이 있고 그 테이블을 작은 장치에 표시 할 때 열의 값 중 일부를 요약하려고합니다. 내가 작은 장치에서이 테이블을 보여 나는이

Process Good Other Total 
P1   10  7  17 + 
P2   5  5  10 + 
Total  5  12  17 + 

을 보여 드리고자하지만 표시하지 않으려면

내가이 테이블 (큰 장치)

Process Good Bad Rework Total 
P1   10  5  2  17 
P2   5  3  2  10 
Total  5  8  4  17 

이 있다고 가정하자 큰 장치의 "기타"열 (+ 기호를 표시하지 않겠습니다). 그 열이 완전히 숨겨 지길 바래.

달성 방법을 찾을 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

CSS 미디어 쿼리을 사용할 수 있습니다. 이 도움이

th, td { 
 
    padding: 5px 20px; 
 
} 
 

 
.visible-mob { 
 
    display: none; 
 
    background: #FF0; 
 
} 
 

 
.hidden-mob { 
 
    display: table-cell; 
 
    background: #38E8F1; 
 
} 
 

 
/* When Screen Width is >= 767px (~ Mobile Devices) */ 
 
@media screen and (max-width: 767px) { 
 
    .visible-mob { 
 
    display: table-cell; 
 
    } 
 
    
 
    .hidden-mob { 
 
    display: none; 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Process</th> 
 
     <th>Good</th> 
 
     <th class="hidden-mob">Bad</th> 
 
     <th class="hidden-mob">Rework</th> 
 
     <th class="visible-mob">Other</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>P1</td> 
 
     <td>10</td> 
 
     <td class="hidden-mob">5</td> 
 
     <td class="hidden-mob">2</td> 
 
     <td class="visible-mob">7</td> 
 
     <td>17</td> 
 
    </tr> 
 
    <tr> 
 
     <td>P2</td> 
 
     <td>5</td> 
 
     <td class="hidden-mob">3</td> 
 
     <td class="hidden-mob">2</td> 
 
     <td class="visible-mob">5</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Total</td> 
 
     <td>5</td> 
 
     <td class="hidden-mob">8</td> 
 
     <td class="hidden-mob">4</td> 
 
     <td class="visible-mob">12</td> 
 
     <td>17</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

희망 : - ( 나쁜 & 재 세포를 보여 데스크탑 를 사용하여 전체 화면 모드)

아래의 코드 조각에서보세요!

Answer 2

일시적으로 내가하고 싶은 것을 얻기 위해 적용한 못생긴 해킹입니다. 누군가가 더 나은 방법을 찾으면 알려주세요.

HTML

<table class="table"> 
    <thead> 
    <tr> 
     <th>Process</th> 
     <th>Good</th> 
     <th data-breakpoints="xs">Bad</th> 
     <th data-breakpoints="xs">Rework</th> 
     <th class="visible-column visible-column-sm" data-classes="visible-column visible-column-sm" data-visible="false">Other</th> 
     <th>Total</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td>P1</td> 
     <td>10</td> 
     <td>5</td> 
     <td>2</td> 
     <td>7</td> 
     <td>17</td> 
    </tr> 
    <tr> 
     <td>P2</td> 
     <td>5</td> 
     <td>3</td> 
     <td>2</td> 
     <td>5</td> 
     <td>10</td> 
    </tr> 
    <tr> 
     <td>Total</td> 
     <td>5</td> 
     <td>8</td> 
     <td>4</td> 
     <td>12</td> 
     <td>17</td> 
    </tr> 
    </tbody> 
</table> 

되는 HTML 여기

<script> 
    $(document).ready(function() { 
     $('.table').footable(); 
    }); 
</script> 

의 끝에서 CSS

.visible-column { 
    display: none !important; 
} 

@media screen and (max-width: 767px) { 
    .visible-column-sm { 
     display: table-cell !important; 
    } 
} 

는 바이올린

https://jsfiddle.net/oL7m7uqq/

0,123,516에게 있습니다