에티테마

TABLE 여러가지 방법으로 반응형 제작하기

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 530회 작성일 20-07-15 01:51

본문

우선 TABLE 의 경우 반응형으로 제작할시 줄어들면서 
보기 싫게 처리 되는 경우가 많습니다.
아래 주소에 나와 있는 display:block 를 사용하셔서 처리 하게 되면
깔끔하게 정렬되는 모습을 볼 수 있습니다.

상황에 맞게 처리 하시면 될듯 합니다.

미디어 쿼리를 이용하여 브라우저 크기를 감지하여 처리하는 css 입니다.



  1. @media only screen and (max-width: 800px) {
  2. /* Force table to not be like tables anymore */
  3. #no-more-tables table,
  4. #no-more-tables thead,
  5. #no-more-tables tbody,
  6. #no-more-tables th,
  7. #no-more-tables td,
  8. #no-more-tables tr {
  9. display: block;
  10. }
  11.  
  12. /* Hide table headers (but not display: none;, for accessibility) */
  13. #no-more-tables thead tr {
  14. position: absolute;
  15. top: -9999px;
  16. left: -9999px;
  17. }
  18.  
  19. #no-more-tables tr { border: 1px solid #ccc; }
  20.  
  21. #no-more-tables td {
  22. /* Behave like a "row" */
  23. border: none;
  24. border-bottom: 1px solid #eee;
  25. position: relative;
  26. padding-left: 50%;
  27. white-space: normal;
  28. text-align:left;
  29. }
  30.  
  31. #no-more-tables td:before {
  32. /* Now like a table header */
  33. position: absolute;
  34. /* Top/left values mimic padding */
  35. top: 6px;
  36. left: 6px;
  37. width: 45%;
  38. padding-right: 10px;
  39. white-space: nowrap;
  40. text-align:left;
  41. font-weight: bold;
  42. }
  43.  
  44. /*
  45. Label the data
  46. */
  47. #no-more-tables td:before { content: attr(data-title); }
  48. }


[데모주소]
https://elvery.net/demo/responsive-tables/

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 7건 1 페이지

카테고리

카테고리
 ETC
CSS
 JAVASCRIPT
 BOOTSTRAP
 HTML5
 VUEJS
 REACTJS
 NODEJS
 PHP
 SQL
 SERVER

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트