초초초초초보개발자
40
2021-04-07 14:58:36
3
107

[html/css] 병합된 셀 정렬하는법


안녕하세요.

테이블을 javascript를 사용해서 동적으로 만들었는데 셀 병합한 테이블 정렬하는 부분이 막혀서 고수님들의 의견 여쭙니다ㅠㅠ

보안상 실제 코드랑 테이블은 보여드릴수 없어서 그림으로 설명드릴게요..

for(var i=0;i<list.length;i++){
    table += "<td rowspan='"+rowspan+"'>";
    table += i;
    table +="</td>"
}

저는 a 컬럼은 가운데 정렬, b는 왼쪽정렬, c는 가운데정렬 이렇게 하고 싶은데

위 코드 처럼 반복문으로 만들다보니 1은 가운데 2는 왼쪽 3은 가운데 이렇게 align 값을 주니까

a밑에 2가 왼쪽정렬로 들어가서 a컬럼에 왼쪽정렬이 들어가고 b컬럼엔 가운데 정렬이 들어가고 그렇습니다.. 혹시 특정 th 밑에 모든 td의 align을 설정한다던지 하는 방법이 없나요?

colgroup을 찾았는데 그건 align이나 class 주는 방법도 안먹히더라구요..

고수님들 의견 기다립니다ㅠㅠ

0
  • 답변 3

  • doru
    102
    2021-04-07 15:43:52

    음.. 그냥 css만 잘 짜면 될거같네요

  • doru
    102
    2021-04-07 15:57:24 작성 2021-04-07 15:57:39 수정됨


    <style>
    
        table tbody tr:first-child td:first-child{text-align: center;}
        table tbody tr:first-child td:nth-child(2){text-align: center;}
        table tbody tr:first-child td:nth-child(3){text-align: left;}
        table tbody tr:first-child td:nth-child(4){text-align: center;}
    
    
        table tbody tr td:first-child{text-align: center;}
        table tbody tr td:nth-child(2){text-align: left;}
        table tbody tr td:nth-child(3){text-align: center;}
    
    </style>
    
    <table>
        <colgroup>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
            <tr>
                <th colspan="2">a</th>
                <th>b</th>
                <th>c</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td colspan="2">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td colspan="2">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>

    현재 저 그림상 css상 마크업은 이렇게 됩니다.. 이걸 스크립트로 동적으로 생성하는건 한번 잘.. 고민해보시시면 될거같습니다

  • 초초초초초보개발자
    40
    2021-04-08 10:32:00

    정말 감사합니다 선생님! 적어주신 style을 같이 동적으로 생성해서 해결했습니다!ㅎㅎ

  • 로그인을 하시면 답변을 등록할 수 있습니다.