css 관련 질문입니다.
본문
<table id="table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
을 반응형으로 순서를 바꿔보고 싶은데
pc에서는
1 2 3
4 5 6 이렇게 나오는걸
모바일에서
1 4
2
5
3
6
이렇게 보이게 css로 할 수 있을까요??
tr하나로 감싸져 있으면 flex나 box로 order 줘서 하면 되는데
tr이 두개로 나눠져있어 각 tr 안에서만 td 순서가 바뀌더라구요 ㅠㅠ
absolute 안걸고 작업해보려는데 좋은 방법 없을까요?
tr 감싸진거 상관없이 td 순서를 지정하고 싶습니다.
답변 3
혹시
1 4
2 5
3 6 으로 배치하시려는건가요?
아님 정말
1 4
2
5
3
6
인가요?
정말 밑에 처럼입니다
뭔가..규칙이 따로 있지 않아 힘드네요
가장 무난하게 absolute 또는 jquery로 tr, td 속성 삭제 후 레이어 처리해야할 것 같네요..
tr , td 요소에 float 를 준다음
col4 에다가 높이값을 줘서 어떻게 해볼수있긴 할 것 같은데...
그냥 맘편하게 absolute로 작업하는게 가장 좋을것 같습니다..
어차피 col4만 absolute를 줘버리면 나머지는 블럭처럼 정리될테니..
제이쿼리 사용하시면됩니다.
온스크롤시 화면 너비 감지하시고 특정 너비 이하면
아래 링크 예제 참조하셔서 조정하시면됩니다~
https://ktsmemo.cafe24.com/s/jQueryTip/64
정말 스크립트 말고 css 만으로 하고 싶다 하시면
모바일에서 해당 td 를 hidden 시키고 모바일에서만 보이는 td 를 block 시켜주시면됩니다.
답변을 작성하시기 전에 로그인 해주세요.