HTML - HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상

DB데이터를 가져와서 테이블에 데이터를 만들어 append를 처리하고 있었는데, 데이터 문자열 내부에 "(더블 쿼드)가 포함된 긴 문자열이 들어가 있었고, 정상적인 넓이로 table이 동작하지 않았다.

'<colgroup>' 태그로 width를 주고 css로 width : 넓이값% !important까지 처리하였지만 여전히 먹통이였다.

word-break: break-all 속성을 추가하여도 문제가 발생하였는데,

원인은 특수문자 "(더블 쿼드)가 존재하면서 발생하는 문제였고, 파싱하는 과정에서 replace메소드로 치환하여 처리하니 문제없이 동작하였다.

아래는 비슷한 현상을 재현하기 위한 sample 소스이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        *{margin:0; padding:0;}
        html, body, .wrapper{width:100%; height: 100vh;}
        .wrapper .tableBox{position: relative; top: 50px; left:50px; width: 700px;}
        .wrapper .tableBox .scroll{width: 100%; height: 100px; overflow-y: scroll;}
        table{border-collapse:collapse;text-align: center;}
        table th{border-top: 2px solid dodgerblue; position: sticky; top: 0px;}
        table th, table td{border-bottom: 1px solid #dedede;border-right: 1px solid #ddd;word-break: break-all;}
        .tableHeader{width: calc(100% - 17px);}
        .tableHeader th{height: 40px;}
        .tableData{width: 100%;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="tableBox">
            <table class="tableHeader">
                <colgroup>
                    <col width="8%">
                    <col width="15%">
                    <col width="25%">
                    <col width="16%">
                    <col width="12%">
                    <col width="12%">
                    <col width="12%">
                </colgroup>
                <thead>
                    <tr>
                        <th>순번</th>
                        <th>구분</th>
                        <th>제목</th>
                        <th>글쓴이</th>
                        <th>날짜</th>
                        <th>첨부파일</th>
                        <th>비고</th>
                    </tr>
                </thead>
            </table>
            <div class="scroll">
                <table class="tableData">
                    <colgroup>
                        <col width="8%">
                        <col width="15%">
                        <col width="25%">
                        <col width="16%">
                        <col width="12%">
                        <col width="12%">
                        <col width="12%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>공지사항</td>
                            <td>제목입니다.</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>공지사항</td>
                            <td>제목 "1","2","3","4","5","6","7","8","9","10","11"</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>게시판</td>
                            <td>123456789123456789123456789</td>
                            <td>홍길동</td>
                            <td>2020-11-26</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

테이블 컬럼을 고정화 시키기 위해 table 태그를 2개로 구성하였다.

이후 로드된 페이지는 아래와 같다.

제목 컬럼의 내용이 특수문자가 추가되면서 주르륵 붙으면서 발생하는 현상이다.

다음은 더블쿼드를 삭제하였을때 정상적으로 동작하는 것을 볼 수 있다.

Atachment
첨부 '2'	img.png, img.png,

List of Articles
번호	제목	날짜	조회 수
22	특수문자, 특수문자표, 특수문자 하트, 예쁜 특수문자	2016.12.06	43886
21	viewport 정리	2017.04.14	3502
20	viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법	2017.04.14	6865
19	form안의 button submit 동작 막기	2018.08.24	1723
18	FCKeditor 2.6.x 버전 IE9에서의 Dialog 버그 수정	2018.10.27	1166
17	테이블 대신 필드셋(fieldset) 이용	2019.01.16	2122
16	input 자동완성 끄기 HTML	2019.02.19	1090
15	div iframe 퍼센트 높이조절 문제 해결(div, iframe height 100%)	2019.03.05	1003
14	네이버 웹마스터도구 메타태그	2019.04.29	787
13	크롬 알림처럼 띄워보기	2019.04.29	845
12	HTML, CSS - 헤더컬럼 고정형 table 구성하기	2021.03.09	737
»	HTML - Table td안에 특수문자(")가 존재할 경우 넓이 초과 현상	2021.03.09	247
10	CSS - p태그 등 너무 긴 문자열이 존재할 때, 넓이에 따른 자동 줄바꿈	2021.03.09	590
9	HTML - Form 태그, Input 태그 자동완성 해제하기	2021.03.09	152
8	javascript로 alt 또는 title 달때 내용에 포함된 따옴표 치환하기	2021.03.25	166
7	인라인 자동완성 기능 막기	2021.03.25	130
6	input태그 tab 순서 설정 : tabindex	2021.03.26	357
5	map태그에서 window.open() 쓰기	2021.03.26	201
4	MSword : 인쇄 미리보기-한페이지씩 보이기	2021.03.26	301
3	Input 태그 한글, 영문모드 전환	2023.01.12	248

특수문자, 특수문자표, 특수문자 하트, 예쁜 특수문자

2016.12.06

43886

viewport 정리

2017.04.14

3502

viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법 file