css 테이블 스크롤 적용하기

조회수 46회

반응형 웹을 만들고 있습니다 부트스트랩 container로 외각 레이아웃을 잡고 col-lg-5 / col-lg-2 / col-lg-5 구조로 쪼개어 col-lg-5 부분에 각각 스크롤 기능이 들어간 테이블을 작성했습니다.

//                      <table>
                            <thead>
                                <tr style="height:30px" id="thead_nation">
                                    <th>Position</th>
                                    <th>Player</th>
                                    <th>Age</th>
                                    <th>Height</th>
                                    <th id="test2">Entry</th>
                                </tr>
                            </thead>
                        </table>
                        <div class="scroll_y">
                            <table>
                                <tbody id="away_team_player_nation">
                                </tbody>
                            </table>
                        </div>

tbody의 id(away_team_player_nation)는 선수 목록들이 쭉 나오게 jquery로 연결 되어 있구요 class="scroll_y"에는 .scroll_y { height:200px ; overflow-x:hidden } 이렇게 적용해두었습니다 그런데 제 컴퓨터에는 컬럼명과 컨탠츠들의 비율이 깨져서 나오고 똑같은 페이지 열람 했을 때 다른 pc에서는 잘 맞게 나오더라구요 모두 크롬 브라우저를 썼구요 어떤 게 원인인지 모르겠습니다.

이미지

이미지

  • 원하시는 것은 테이블에서 헤더 행을 고정하는 작업입니다. 테이블 2개를 그리지 마시고, 여기의 소스들을 참고해서 1개의 테이블의 특정 구간을 고정 처리하세요. https://stackoverflow.com/questions/21168521 엽토군 2019.6.11 18:46
  • 우선 감사합니다. 그런데 제 질문은 같은 코딩으로 다른 pc나 모바일에서는 아래 이미지처럼 정상적인 비율로 나오는데 왜 제 컴퓨터에서는 비율이 깨져서 나올까요? 처음에는 저도 정상적으로 나왔으나 다시 실행시키고 나서부터 위에 사진처럼 깨집니다. 김재민 2019.6.12 08:12
  • 그건 스크롤바의 문제인데 스크롤바는 생각보다 지저분한 주제라서요. 피할 수 있으면 적극적으로 피해야 합니다. 혹시 저 스크롤바를 띄우기 위해 별도로 라이브러리를 사용하고 계신가요? 엽토군 2019.6.12 14:02
  • 아니요 css로는 단순히 .scroll_y { height:200px ; overflow-x:hidden } 이런식으로 적용하기만 했습니다 김재민 2019.6.12 14:40

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    질문하고 계신 것은 사실 스크롤바 자체를 문제 상황으로 간주할 것이냐까지 올라가는 문제입니다.

    1. 문제가 된다면 적당한 스크롤바 라이브러리를 가져다 쓰세요. 그러면 웬만한 OS/디바이스/브라우저 에서 모두 같은 동작을 할 것이므로 거기서부터 다시 대응하시면 됩니다.
    링크한 라이브러리의 동작을 보아하니, 지금의 표면적 문제상황 ― "스크롤바가 자리를 차지해 버려서 테이블 위아래가 서로 어긋나는 문제" ― 을 해결해줄 것 같긴 합니다.

    2. 그런데, 제 생각에 스크롤바라는 것은 문제로 간주하면 안 됩니다. 마치 우리가 브라우저 기본 폰트를 문제삼지 않고, 대신 꼭 필요한 특정 폰트를 사용하기 위해 '웹 폰트'라는 기술을 쓰는 것과 마찬가지지요. 당장 스크롤바 너비 자체가 브라우저별로 OS별로 다 다르거든요.

    이미지

    이걸 일일이 맞추고 살면 안 됩니다. 이런 문제와 싸우지 않는 것, 즉 이 문제가 있다손 치더라도 그게 별 상관없는 뷰를 만드는 것이 최선의 전략이라는 게 제 의견입니다. 공유해 주신 문제 자체에 관해서 좀더 생각해 보자면, 이럴 때는 전체 표는 전체 페이지의 스크롤을 따르게 하되, 특정 조건이 되면 헤더 부분이 페이지 최상단에 딱 고정되게 하는 것이지요. (많이들 이렇게 합니다.)

    참고가 되면 좋겠습니다.

    • 브라우저별로 스크롤바 크기가 다른걸 생각 못했네요 감사합니다 김재민 2019.6.13 10:41
    • 그런데 반응형 웹 페이지에서 이 문제들을 모두 해결할 수 있는 방법이 있을까요? 스크롤을 tbody만 적용하여 옆으로 빼려하니 thead와 tbody의 width를 px값으로 정해야하는데 그러면 반응형 웹에 맞춰 페이지가 커지지 않아서요 김재민 2019.6.13 10:42
    • bootstrap 4 table header sticky 로 찾으시면 뭔가 있을것 같습니다. https://codepen.io/balajidesigner/pen/YBKQBK?editors=0100 / https://codepen.io/bobmarksie/pen/VadxoK 등등 엽토군 2019.6.13 11:15
    • 감사합니다 ^^ 덕분에 해결 했습니다 김재민 2019.6.14 13:24

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.