2016-06-02 6 views
0

나는 좋은 디자이너가 아닙니다. 다음 그림을 참고하십시오.크기가 조정 된 행이있는 표 머리글 변경

나는이

enter image description here

같은 테이블 뭔가를하지만 우리는 모바일 화면에 크기를 조정하거나, 테이블로 변경해야합니다 :

enter image description here

가이드하시기 바랍니다

+0

당신은 아무것도 시도해 봤어을 얻을 ??? –

+0

예 @GuruprasadRao, 실제로 일부 스크롤 기능 등으로 반응성 테이블을 구현하는 방법에 대해서만 알고 있지만이 기능을 구현하는 방법을 알지 못합니다. 나는 부트 스트랩을 처음 사용합니다. – Rahul

답변

1

Bootstrap grid

모바일에서 원하는 레이아웃을 생성하기 위해 각 테이블 행에 추가 할 부트 스트랩 클래스입니다. 이 작업을하기 위해서는 적절한 bootstrap js와 css 파일을 가지고 있어야합니다. 부트 스트랩 웹 사이트에서 부트 스트랩 그리드가 작동하는 방법에 대한 자습서를 얻을 수 있습니다.

<table class="row"> 
    <td class="col-xs-6"></td > 
    <td class="col-xs-6"></td > 
    <td class="col-xs-6"></td > 
    <td class="col-xs-6"></td > 
    <td class="col-xs-6"></td > 
    <td class="col-xs-6"></td > 
    <td class="col-xs-12"></td > 
    <td class="col-xs-12"></td > 
</table> 

이것은 당신이 코드를있어 보지 않고 그냥 빨리 요구되는 코드의 종류의 예에 불과하다 하드 적절한 아이디어

+0

당신이 말한 클래스를주었습니다 만, 크기를 변경하면 작동하지 않습니다. – Rahul

+0

전체 테이블을 캡슐화 한 클래스 행이 있습니까? 이 대답을 보여주는 수정 된 답변 – Smithy

+0

감사합니다. Smithy하지만이 기능이 작동하지 않아서 ngResposiveCss를 사용했지만 문제가 있습니다. 이 질문을 확인해주십시오. https://stackoverflow.com/questions/37674121/responsive-table-but-need-to-edit-few-rows-style-on-resize – Rahul