소형 장치의 열 수 감소

Question

표 형식의 데이터가 아니라 표 형식의 레이아웃에만 사용되는 테이블 & 응답 성을 높이기 위해 노력하고 있습니다. 레이아웃 단지를 위해, 나는 원래 내 테이블과 같은 4 열이 같은 소형 기기 만 1 열, 중간 장치 2 열, 가지고 싶은 것 같이 원래 테이블 소형 기기에서

<div class="table-responsive"> 
    <table class = "table"> 
     <tr> 
      <td>First Name: </br><input type="text" id= "txtFname"/><td> 
      <td>Middle Name: </br><input type="text" id= "txtMname"/><td> 
      <td>Last Name: </br><input type="text" id= "txtLname"/><td> 
      <td>Date Of Birth: </br><input type="text" id= "txtDob"/><td> 
     </tr> 
    </table> 
</div> 

를이해야한다 같은 : 중간 장치 에서

<div> 
    <table> 
     <tr><td>First Name: </br><input type="text" id= "txtFname"/><td></tr> 
     <tr><td>Middle Name: </br><input type="text" id= "txtMname"/><td></tr> 
     <tr><td>Last Name: </br><input type="text" id= "txtLname"/><td></tr> 
     <tr><td>Date Of Birth: </br><input type="text" id= "txtDob"/><td></tr> 
    </table> 
</div> 

2 열이를 달성하기 위해 거기에 어떤 방법이 있나요, 제안 해주십시오. 나는 그와 함께 할 수 있다는 것을 알고 있지만 그것을 할 수 있습니까?

Answer 1

당신이 DIV 년대의 테이블의 insted을 사용을한다면, 당신을위한 쉬운 솔루션 이 태블릿/데스크톱 및 모바일 기기에서 두 번째 테이블에서 첫 번째 테이블을 표시합니다

<div class="table-responsive hidden-xs"> 
    <table class = "table"> 
     <tr> 
      <td>First Name: </br><input type="text" id= "txtFname"/><td> 
      <td>Middle Name: </br><input type="text" id= "txtMname"/><td> 
      <td>Last Name: </br><input type="text" id= "txtLname"/><td> 
      <td>Date Of Birth: </br><input type="text" id= "txtDob"/><td> 
     </tr> 
    </table> 
</div> 

<div class="visible-xs"> 
    <table> 
     <tr><td>First Name: </br><input type="text" id= "txtFname"/><td></tr> 
     <tr><td>Middle Name: </br><input type="text" id= "txtMname"/><td></tr> 
     <tr><td>Last Name: </br><input type="text" id= "txtLname"/><td></tr> 
     <tr><td>Date Of Birth: </br><input type="text" id= "txtDob"/><td></tr> 
    </table> 
</div> 

이 같은 hidden-xs 및 visible-xs 클래스를 사용하는 것입니다.

Answer 2

레이아웃 용 테이블을 사용하는 것은 좋은 생각이 아닙니다.

이

<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-3"> 
     First Name: <br><input type="text" id= "txtFname"/> 
    </div> 
    <div class="col-sm-12 col-md-6 col-lg-3"> 
     Middle Name: <br><input type="text" id= "txtMname"/> 
    </div> 
    <div class="col-sm-12 col-md-6 col-lg-3"> 
     Last Name: <br><input type="text" id= "txtLname"/> 
    </div> 
    <div class="col-sm-12 col-md-6 col-lg-3"> 
     Date Of Birth: <br><input type="text" id= "txtDob"/> 
    </div> 
    </div> 

여기 bootply 예입니다 : 당신은 부트 스트랩의 row 및 col 클래스를 사용하여이 사건에서 원하는 동작을 얻을 수 있습니다 http://www.bootply.com/pDHIPj3NJ3