그누보드팁 | style="table-layout:fixed"

[그누보드] style="table-layout:fixed"

웹스터디 / 2011.12.19 01:34 / hit 5,346 추천 0

overflow:hidden, text-overflow:ellipsis 속성과 <nobr> 태그를 함께 사용하여 크기에 맞게 텍스트를 잘라서 표현하고자 한다.

<div style="padding-top:3px; border:1px solid #e4e4e4; text-overflow:ellipsis; overflow:hidden;">
<table width=100% cellpadding=0 cellspacing=0>
<? for ($i=0; $i<count($list); $i++) { ?>
   <tr><td colspan=4>
       <table width=100%>
           <tr>
           <td class="latest" height=18><NOBR> <img src='<?=$latest_skin_path?>/img/latest_icon.gif' align=absmiddle>
           <?
           echo $list[$i]['icon_reply'] . " ";

           echo " " . $list[$i]['icon_secret'];
           ?>
           <NOBR>
           </td>
           </tr>
       </table>
   </td></tr>
</table>

※ NOBR 사이에는 절대로 빈칸을 남기지말아야 한다. 그림도!

만약 위의 코드대로 실행되지 않는다면, 테이블에 style="table-layout:fixed" 속성을 준다.

[출처] style="table-layout:fixed"|작성심진

1. css 적용하지 않은 기본 table테그

2. 1번테이블의 셀에 지정된 컬럼길이를 넘어가는 값이 셋팅되면

테이블 width 및 각 컬럼에 지정된 width를 무시하고 아래처럼 되버린다.

3. 컬럼에 지정된 width에서 자동 줄바꿈하기

<table style="width:500px;border:1px solid #000000;table-layout:fixed">
    <colgroup>
        <col style="width:150px"/>
       <col style="width:200px"/>
       <col style=""/>
    </colgroup>
    <thead>
    </thead>
    <tbody>
        <tr>
            <td style="border:1px solid red;word-wrap:break-word">
                1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </td>
            <td style="border:1px solid green">
                2
            </td>
            <td style="border:1px solid orange">
                3
            </td>
        </tr>
    </tbody>
</table>

4. width넘어가면 hidden 처리하기

<table style="width:500px;border:1px solid #000000;table-layout:fixed">
    <colgroup>
        <col style="width:150px"/>
       <col style="width:200px"/>
        <col style=""/>
    </colgroup>
    <thead>
    </thead>
    <tbody>
        <tr>
            <td style="border:1px solid red;word-wrap:nowrap;overflow:hidden">
                1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </td>
            <td style="border:1px solid green">
                2
            </td>
            <td style="border:1px solid orange">
                3
            </td>
        </tr>
    </tbody>
</table>

word-wrap이 잘 안먹히면 white-space가 상속되어있는지 확인하기.