표(테이블 붙여넣기)에 문제가 있는 경우가 있나요?

[creeras]

ckeditor 에디터에서 보면 정상적으로 보이는데 글쓰기 완료하고 뷰어에서 보면 표가 가로가 아닌 세로로 배치되는 그런 증상이 있습니다.

테스트를 많이 해본 건 아니고 두번 표붙이기 해서 두번 같은 일이 있었습니다.

Chatgpt 에게 물어보니 css 충돌일 가능성이 있다면서 html tag 를 수정해 줬는데, 에디터에 붙여 넣고 저장하니 표가 잘 보이더라구요.

원래 코드

<table border="1" cellpadding="1" cellspacing="1" style="width: 600px;">
    <thead>
        <tr>
            <th scope="row">Factorial</th>
            <th scope="col">~69!</th>
            <th scope="col">70!~449!</th>
            <th scope="col">500!~1006!</th>
            <th scope="col">1007!~3248!</th>
            <th scope="col">3249!~</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">EL-509W</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(Error 2)</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
        </tr>
        <tr>
            <th scope="row">fx-570ES, EX</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(Math Error)</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
        </tr>
        <tr>
            <th scope="row">fx-9860G</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(Ma Error)</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
        </tr>
        <tr>
            <th scope="row">TI-nspire, 89T</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(500!)</td>
            <td style="text-align: center;">X</td>
            <td style="text-align: center;">X</td>
        </tr>
        <tr>
            <th scope="row">HP Prime</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(∞)</td>
            <td style="text-align: center;">&nbsp;</td>
        </tr>
        <tr>
            <th scope="row">윈도우10 내장</th>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">O</td>
            <td style="text-align: center;">X(Overflow)</td>
        </tr>
    </tbody>
</table>

chatgpt-4o 가 고쳐준 코드

<table border="1" cellpadding="1" cellspacing="1" style="width: 600px;">
    <thead>
        <tr>
            <th style="display: table-cell; width: 100px;">Factorial</th>
            <th style="display: table-cell; width: 100px;">~69!</th>
            <th style="display: table-cell; width: 100px;">70!~449!</th>
            <th style="display: table-cell; width: 100px;">500!~1006!</th>
            <th style="display: table-cell; width: 100px;">1007!~3248!</th>
            <th style="display: table-cell; width: 100px;">3249!~</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th style="display: table-cell; width: 100px;">EL-509W</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(Error 2)</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
        </tr>
        <tr>
            <th style="display: table-cell; width: 100px;">fx-570ES, EX</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(Math Error)</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
        </tr>
        <tr>
            <th style="display: table-cell; width: 100px;">fx-9860G</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(Ma Error)</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
        </tr>
        <tr>
            <th style="display: table-cell; width: 100px;">TI-nspire, 89T</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(500!)</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X</td>
        </tr>
        <tr>
            <th style="display: table-cell; width: 100px;">HP Prime</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(&infin;)</td>
            <td style="display: table-cell; text-align: center; width: 100px;">&nbsp;</td>
        </tr>
        <tr>
            <th style="display: table-cell; width: 100px;">윈도우10 내장</th>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">O</td>
            <td style="display: table-cell; text-align: center; width: 100px;">X(Overflow)</td>
        </tr>
    </tbody>
</table>

최종 결과

표(위 코드 2종류)가 올라간 사이트 주소입니다. https://allcalc.org/board_free2015/42592

[creeras]

https://github.com/OrangeDayCom/rhymix-layout/blob/66e160b84fb2e0a0678492e55b5965f6b5c95c1d/1.0.3/modules/board/skins/OrangeDay_board/css/default.css#L950

.od-bord table td { display: flex; align-items: center; line-height:1.4; padding-top:5px; padding-bottom:5px } 이 부분인데, 제 사이트에서만 뭐가 안맞는 걸까요? 저는 display: flex; 부분을 빼고 써야할 것 같습니다.

[creeras]

display: flex; 를 제외하니까 다른 부분에서 오류가 발생하네요.

다만, 이건 관리자만 보이는거라 다행?입니다.

[OrangeDayCom]

게시글에서 테이블 사용할때를 대비를 못했네요. 글 작성시 테이블을 사용해 본적이 없다보니.. 그 부분은 수정하고 다음 버전에서 배포될 수 있도록 하겠습니다. 제보 감사합니다.

[OrangeDayCom]

임시로 수정하시려고 한다면 /modules/board/skins/OrangeDay_board/css/default.css 에서 라인 950 .od-bord table td { display: flex; align-items: center; line-height:1.4; padding-top:5px; padding-bottom:5px } 을 .od-bord .write_header table td { display: flex; align-items: center; line-height:1.4; padding-top:5px; padding-bottom:5px } 로 수정하면 됩니다.