테이블 td 너비 고정

따로 css에 설정해둔 클래스도 없고, 퍼블리싱도 나와있지 않고, 그리드로 그리는 테이블도 아니었다.

그냥 만든 테이블이었다.

QA 중 장문의 글을 노출 시 팝업에 보여지는 td가 옆으로 늘어지고, 줄바꿈처리가 안된다는 이슈가 올라왔다.

아마 그동안의 내 작업환경들은 보이지 않는 곳에서 이번에 내가 이번에 새롭게 확인한 설정이 미리 되어있었을 것이라 생각들어 새삼 퍼블리싱에 고마움을 느꼈다.

역시 문제에 맞닥뜨려야만 배우게 되는 것 같다.

이슈. 테이블 td가 고정되지 않음

• 수정 전

<table class="ui table vertical">

    <caption></caption>

    <colgroup>

        <col width="150px">

        <col width="*">

    </colgroup>

    <tbody>

    <tr>

        <th>신고일</th>

        <td id="requestDate"></td>

    </tr>

    <tr>

        <th>사유</th>

        <td id="requestReasonType"></td>

    </tr>

    <tr>

        <th>상세사유</th>

        <td id="requestReasonDetail"></td>

    </tr>

    <tr id="tr_replyDate" style="display:none;">

        <th>답변일</th>

        <td id="replyDate"></td>

    </tr>

    <tr id="tr_replyDetail" style="display:none;">

        <th>구매자에게<br />전하실 말씀</th>

        <td id="replyDetail"></td>

    </tr>

    </tbody>

</table>

• 수정 후

<!-- table class를 추가하고, jQuery로 스타일 적용함 -->

<table class="ui table vertical devTableStyle">

    <caption></caption>

    <colgroup>

        <col width="150px">

        <col width="370px">  <!-- 너비를 지정해주어야한다 -->

    </colgroup>

    <tbody>

    <tr>

        <th>신고일</th>

        <td id="requestDate"></td>

    </tr>

    <tr>

        <th>사유</th>

        <td id="requestReasonType"></td>

    </tr>

    <tr>

        <th>상세사유</th>

        <td id="requestReasonDetail"></td>

    </tr>

    <tr id="tr_replyDate" style="display:none;">

        <th>답변일</th>

        <td id="replyDate"></td>

    </tr>

    <tr id="tr_replyDetail" style="display:none;">

        <th>구매자에게<br />전하실 말씀</th>

        <td id="replyDetail"></td>

    </tr>

    </tbody>

</table>

<script>

$(".devTableStyle td").attr("style", "word-break:break-all");

</script>

td에 스타일만 추가해주면 된다.

word-break는 글이 길어질 때 줄바꿈을 어떻게 할지 지정하는 속성이라고 한다.

break-all로 지정하면, 문자를 강제로 줄바꿈 할 수 있다.

다른 화면에 적용된 css파일에 해당 내용이 몇가지 적용되어 있는 것을 확인했다.

css는 내맘대로 바꿀 수 없으므로 일단 난 내 화면만 먼저 적용ㅋ_ㅋ

수정하면! 아래처럼 댕당

[참고 출처] word-break 줄바꿈 속성(break-all, keep-all)

• 추가

table 자체를 고정할 경우

style="table-layout: fixed"를 준다고 한다.

<table border=1 width=100 style="table-layout: fixed" >

[출처] 테이블 td 사이즈 고정하기.