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

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

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

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

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

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