◈ 'table' 태그의 글 목록

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

CSS 모음
日常茶飯事
2010. 2. 4. 10:17
Posted by pantarei

CSS 모음

- HTML Table

- font-size

- vertical-align
top, middle

<div style="overflow-y:scroll; height:100px; width: 100%">

style="width:40px"
<td style="background:#F2F2F2;" align="center">
align은 ?

color:orange; font-weight:bold
<div style="display:none;"

저작자표시 비영리 변경금지

테이블 깨짐 방지
日常茶飯事
2009. 6. 8. 12:49
Posted by pantarei

테이블 깨짐 방지

글자가 너무 길거나 내용이 많아서 화면이 깨지는 경우가 있다.
서버나 클라이언트 스크립트를 이용해서 내용을 줄이는 방법을 사용하는데
화면단에서 처리하는 방법을 적어 본다.

table-layout:fixed
overflow:hidden
nowrap -or- nobr

<table border="1" width="100%" style="table-layout:fixed;">
 <tr>
  <td width="30%" style="overflow:hidden;">
   <nobr>overflow:hidden; nobr overflow:hidden; nobr overflow:hidden; nobr</nobr>
  </td>
  <td width="70%" style="overflow:hidden;">
   <nobr>overflow:hidden; nobr overflow:hidden; nobr overflow:hidden; nobr</nobr>
  </td>
 </tr>
  <tr>
  <td width="30%" style="overflow:hidden;" nowrap>
   overflow:hidden; nowrap overflow:hidden; nowrap overflow:hidden; nowrap
  </td>
  <td width="70%" style="overflow:hidden;" nowrap>
   overflow:hidden; nowrap overflow:hidden; nowrap overflow:hidden; nowrap
  </td>
 </tr>
 <tr>
  <td style="text-overflow:ellipsis; overflow:hidden;">
   <nobr>text-overflow:ellipsis; overflow:hidden; nobr text-overflow:ellipsis; overflow:hidden; nobr </nobr>
  </td>
  <td style="text-overflow:ellipsis; overflow:hidden;">
   <nobr>text-overflow:ellipsis; overflow:hidden; nobr text-overflow:ellipsis; overflow:hidden; nobr </nobr>
  </td>
 </tr>
  <tr>
  <td style="text-overflow:ellipsis; overflow:hidden;" nowrap>
   text-overflow:ellipsis; overflow:hidden; nowrap text-overflow:ellipsis; overflow:hidden; nowrap 
  </td>
  <td style="text-overflow:ellipsis; overflow:hidden;" nowrap>
   text-overflow:ellipsis; overflow:hidden; nowrap text-overflow:ellipsis; overflow:hidden; nowrap 
  </td>
 </tr>
</table>

text-overflow는 IE에서만 사용가능
text-overflow:ellipsis 는 내용이 길어지면 ... 표시를 보여준다.