만들려면 테이블 반응

Question

좀 테이블을 가지고 있고 나는이 테이블 정상적인 모습입니다 (760)

폭을 최대로 보여줄 때 반응하게하려면 :

그리고 내가 원하는 이처럼 만드는 것은 화면의 폭은 최대 760 인 경우 해당 테이블의 마지막 coloumn 단지 응용 프로그램에서

각 행에있는 테이블 끝의 귀.

누구나 저를 도울 수 있습니까?

Answer 1

사용 rsponsive 테이블

이 조각을 확인하기 위해이 HTML & CSS 코드는 다음과 같습니다.

• 를 사용하여 미디어 쿼리 최대 폭이 CSS 대신 테이블을 사용 UL 리튬의 760px 또는 폭

.responsive-table { 
 
    margin:0px auto; 
 
    width:500px; 
 
\t border: 1px solid #efebeb; 
 
    
 
    } 
 
    
 
    .responsive-table img{height:100px; } 
 
    
 
    .responsive-table th { 
 
    display: none; 
 
    } 
 
    
 
    .responsive-table td { 
 
    display: block; 
 
\t border-top: 1px solid #ddd; 
 
    } 
 
    .responsive-table td:first-child{border:none;} 
 
    .responsive-table td:first-child { 
 
    padding-top: .5em; 
 
    } 
 
    .responsive-table td:last-child { 
 
    padding-bottom: .5em; 
 
    } 
 
    .responsive-table td:before { 
 
    content: attr(data-th) ": "; 
 
    display:block; 
 
\t font-weight:bold; 
 
    }

<table class="responsive-table"> 
 
    <tbody> 
 
     <tr> 
 
      <th> 
 
       Room 
 
      </th> 
 
      <th> 
 
       Guest 
 
      </th> 
 
      <th> 
 
       Description 
 
      </th> 
 
      <th> 
 
       Rate 
 
      </th> 
 
      <th> 
 
       Book 
 
      </th> 
 
     </tr> 
 
     <tr> 
 
      <td data-th="Room"> 
 
       <img src="http://i45.tinypic.com/t9ffkm.jpg" alt="" /> 
 
      </td> 
 
      <td data-th="Guest"> 
 
       2 adult 
 
      </td> 
 
      <td data-th="Description"> 
 
       Room Only 
 

 
      </td> 
 
      <td data-th="Rate"> 
 
       USD 200 
 

 
      </td> 
 
      <td data-th="Book"> 
 
       <button type="submit"> Book</button> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>