html Áú¹®Á» µå¸³´Ï´Ù table width °ü·Ã...

   Á¶È¸ 8401   Ãßõ 0    

 웹개발은 css랑 웹디자인이 90%는 차지하는거 같네요 .. 

초보여서 헤메는 중인데 ... 매번 테이블 1개짜리만 쓰다가  테이블 여러개 있는거 쓰려니까 

좀 막히네요 .. table 사용시 .. 

colgroup 에서 .. 

col width 값을 100% 라고 봤을때 앞에 no 부분만.. 50px로 하고 .. 나머지는 균등하게 .. 쫙 펼치고 싶은데.. 

그게 안되네요 px와 %가 혼합이 안되나 보네요 .. 10% 10% 이런식으로 하면.. 

위쪽 테이블이랑.. 칼럼 폭이 안맞고..

혹시 첫번재 칼럼만 px로 고정하고 나머지는 균등한 폭으로 할수 있는 방법 알고 계시면 

팁 부탁 드리겠습니다. 고맙습니다.

ªÀº±Û Àϼö·Ï ½ÅÁßÇÏ°Ô.
ȸ¿øK 2018-09
Å×ÀÌºíº¸´Ù flex¸¦ ¾²½Ã´Â °ÍÀ» Ãßõ µå¸³´Ï´Ù.
https://www.w3schools.com/css/css3_flexbox.asp

Å×ÀÌºí¿¡¼­´Â ±×·± ¹æ¹ýÀÌ ¾ø½À´Ï´Ù.
js µîÀ» ÀÌ¿ëÇؼ­ Àß~ °è»êÇؼ­ %³ª px¸¦ ¼³Á¤ÇØ¾ß ÇÕ´Ï´Ù.

js·Î µÈ ÇÁ·Î±×·¥À» ¾²½Ã´Â °Íµµ ÁÁ±¸¿ä.
https://datatables.net/
     
±èÁ¦¿¬ 2018-09
flex¹Ú½º´Â layout ÀâÀ» ¶§ ÀÌ¿Ü¿£ Àß ¾È¾²°Ô µÇ°¡Áö°í¿ä ..
Ä­µµ ¾öû ¸¹¾Æ¼­ div°°Àº°É·Î ÇϱⰡ..
Ãʺ¸Àڷμ­ Á¦°¡ ÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀ» Çѹø ½ÃµµÇغýÀ´Ï´Ù.
ÇϳªÀÇ Å×À̺í·Î ó¸®Çß½À´Ï´Ù.
À§ÂÊ Å×À̺í°ú ¾Æ·¡ÂÊ Å×À̺íÀÇ Ä®·³À» µ¿ÀÏÇÏ°Ô ¸ÂÃâ·Á¸é ÇϳªÀÇ Å×À̺íÀÌ µÇ¾î¾ß ÇҰŶó »ý°¢ÇÕ´Ï´Ù.
 
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td width="50px" style="border:1px solid red;">12345</td>
<td width="20%" style="border:1px solid red;">12345</td>
<td width="20%" style="border:1px solid red;">12345</td>
<td width="20%" style="border:1px solid red;">12345</td>
<td width="20%" style="border:1px solid red;">12345</td>
</tr>
<tr>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
</tr>
<tr>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
</tr>
<tr>
<td height="18" colspan="5">
    <p>&nbsp;</p></td>
</tr>
<tr>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
</tr>
<tr>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
</tr>
<tr>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
<td  style="border:1px solid red;">12345</td>
</tr>
</table>
     
±èÁ¦¿¬ 2018-09
Ä®·³ÀÇ °¹¼öµéÀÌ Æ²·Á¼­ .Çϳª·Î ¸ÂÃß±â´Â ¾Ö·Î»çÇÏÀ× ÀÖ¾î .. µû·Îµû·Î ÆøÀ» º¸±âÁÁ°Ô ¸ÂÃ߾ Àû¿ëÇß½À´Ï´Ù.. ´äº¯ °¨»çÇÕ´Ï´Ù.
Á¤Àμº 2018-09
<table style='width:100%;'>
<colgroup>
<col style='width:50px;' />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>No</th>
<th>BlaBlaBla</th>
<th>BlaBlaBla</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>--</td>
<td>--</td>
</tr>
</tbody>
</table>

Âü°íÇÏ½Ã¸é µË´Ï´Ù.

<TABLE> ÆøÀÌ 100%ÀÎ °æ¿ì(<DIV>ÀÇ ÆøÀÌ ÁöÁ¤µÇ¾î ÀÖ´Ù¸é ÀÌ ÆøÀÇ 100%) <COL>·Î ÁöÁ¤ÇÑ Ä®·³ ¼ö ¸¸Å­ NÀ¸·Î ±ÕµîÇÏ°Ô ³ª´²ÁÝ´Ï´Ù.

Å×ÀÌºí ¸¸µé¶§ ¸¹ÀÌ ¾²´Â ¹æ¹ýÀε¥, ƯÁ¤ Ä÷³Àº °íÁ¤ÆøÀÌ°í ³ª¸ÓÁö´Â °¡º¯ÆøÀ̶ó¸é ÆÛ¼¾Æ®·Î ÁöÁ¤µµ °¡´ÉÇÕ´Ï´Ù.

¿¹¸¦µé¾î ù Ä÷³Àº 100px µÎ¹ø° Ä÷³Àº ÀüüÆø(100%)ÀÇ 10% ¼¼¹ø°¿Í ³×¹ø°´Â ù¹ø° Ä÷³°ú µÎ¹ø° Ä÷³À» »« ³ª¸ÓÁö¸¦ ±ÕµîÇÏ°Ô ¼³Á¤ÇÒ °æ¿ì

<col style='width:100px;' />
<col style='width:10%;' />
<col />
<col />

·Î Àû¾îÁÖ¸é µË´Ï´Ù.
     
±èÁ¦¿¬ 2018-09
¾Æ .. ¾Æ¿¹.. ¾È³Ö¾îÁÖ¸é.. ±ÕµîÀ¸·Î µÇ³ªº¸³×¿ä ..
ÀÌ·¸°Ô ½¬¿î ¹æ¹ýÀÌ ÀÖ¾ú³×¿ä .. ²À ÁöÁ¤ÇØÁà¾ß ÇÏ´ÂÁÙ.. -_-;;´äº¯ °¨»ç ÇÕ´Ï´Ù.
          
ȸ¿øK 2018-09
³»¿ëÀÌ µé¾î°¡¸é ±ÕµîÀÌ ±úÁú°Å¿¡¿ä
               
±èÁ¦¿¬ 2018-09
³× ±×·¯³×¿ä ... ±ÕµîÀ¸·Î ¸¸µé¾îÁöÁö ¾Ê³×¿ä .
                    
limitless 2018-09
table {
    table-layout: fixed;
}
----------
³»¿ëÀÌ µé¾î°¡µµ ±×´ë·Î À¯ÁöµË´Ï´Ù.
´Ù¸¸ ÄÁÅÙÃ÷°¡ »ßÁ®³ª°¡´Â ÀÏÀÌ »ý±æ ¼öµµ ÀÖ½À´Ï´Ù ¤¾¤¾
                         
ȸ¿øK 2018-09
spanÀ» ³Ö°í overflow ¼³Á¤À» ÇÒ ¼öµµ ÀÖÁö¸¸
ºê¶ó¿ìÁ®¿¡ µû¶ó¼­ ´Ù¸£°Ô µ¿ÀÛÇÒ ¼öµµ À־
flex³ª À¯·á Å×À̺í js¸¦ Ãßõ µå·È´ø °Í ÀÔ´Ï´Ù.

µ· Á» ¾²´õ¶óµµ °³¹ß È¿À²Ãø¸é¿¡¼­ ÆíÇÑ °ÍÀÌ ÁÁÀº °Í °°½À´Ï´Ù.
                         
limitless 2018-09
°³¹ßÈ¿À²À» ³ôÀÏ ¼ö ÀÖ´Ù¸é À¯·á Á¦Ç° ±¸ÀÔÇؼ­ »ç¿ëÇϴµ¥ ÇÑÇ¥ ÀÔ´Ï´Ù.
ÀÛ¾÷½Ã°£µµ ºñ¿ëÀ̴ϱî¿ä...
ÀÛ¾÷È¿À² ³ôÀÏ ¼ö ÀÖ´Ù¸é À¯·ÎÁ¦Ç° »ç¿ëÇÏ°í ÀÖ½À´Ï´Ù.

ºê¶ó¿ìÀú ȣȯ¼ºÀ» °í·ÁÇÑ´Ù¸é flex ´Â »ç¿ëÇϱ⠾î·Á¿ï ¼ö ÀÖ½À´Ï´Ù.
IE ÇÏÀ§ ¹öÀü¿¡¼­´Â Áö¿øÀÌ ¾ÈµË´Ï´Ù..

ºê¶ó¿ìÀú¿¡ ¸ÂÃß·Á¸é div ·Î ·¹À̾ƿô ±¸¼ºÇÏ°í CSS Àû¿ëÇÏ´Â°Ô À̽´°¡ ÀûÀº °Í °°½À´Ï´Ù.
ÁøÇàÇÏ´Ùº¸¸é IE ±¸¹öÀü¶§¹®¿¡ Á¦ÀÏ ³­°¨ÇÑ°Í °°½À´Ï´Ù.
                         
±èÁ¦¿¬ 2018-09
table fixed¸¦ Çߴµ¥µµ ³»¿ëÆø¿¡ µû¶ó¼­ Å©±â°¡ Ʋ·ÁÁö³×¿ä..ÄÁÅÙÃ÷°¡ ÀÛÀ¸¸é ÀÛ°Ô .. Å©¸é Å©°Ô..
                         
limitless 2018-09
Äڵ带 ¿Ã·ÁÁֽøé Çѹø ºÁµå¸±°Ô¿ä.
codepen.io À̳ª À¯»çÇÑ »çÀÌÆ®¿¡ ÄÚµå ¿Ã·Á¼­ °øÀ¯ÇØÁÖ¼¼¿ä.
                    
limitless 2018-09
https://css-tricks.com/fixing-tables-long-strings/
»ó±â ¿¹Á¦ Âü°íÇÏ½Ã¸é µµ¿òÀÌ µÉ °Í °°½À´Ï´Ù.
                         
±èÁ¦¿¬ 2018-09
»ó¿ë Á¦Ç°ÀÌ ¾î¶²°ÇÁö ¾Ë ¼ö ÀÖÀ»±î¿ä? ¾ÆÁ÷ °³¹ßÇÑÁö Àϳ⵵ ¾ÈµÇ¼­ .. ¾î¶² ÅøÀÌ ÀÖ´ÂÁö Á¶Â÷ Àß ¾ËÁö ¸øÇÕ´Ï´Ù.
»ç¿ëÇϽô°ÍÀÌ´Ù ÃßõÇÏ´Â°Ô ÀÖÀ¸½Ã¸é Ãßõ ºÎŹ µå¸³´Ï´Ù.
                         
limitless 2018-09
ÀÌÀü¿¡ IDE °ü·ÃÇؼ­ ¸¹Àº ¸»¾¸ Çϼ̴ø °Í °°½À´Ï´Ù.
webstorm, phpstorm, atom ....
JetBrain Á¦Ç° ÆÐÅ°Áö·Î ±¸¸ÅÇؼ­ »ç¿ëÁß¿¡ ÀÖ½À´Ï´Ù..

Âü°í·Î ´õ ¸»¾¸µå¸®¸é ÇϵåÄÚµùÀÌ ±âº»ÀÎ °Í °°½À´Ï´Ù.
óÀ½¿¡´Â Noteplus++ ¸¦ Ãßõµå¸®°í ½Í½À´Ï´Ù. ÇÏ´Ùº¸¸é ¾î´À»õ 'Àΰ£ ÄÚµù±â±â' ´À³¦ÀÌ ³¯¶§°¡ ÀÖ½À´Ï´Ù
                         
±èÁ¦¿¬ 2018-09
https://codepen.io/k3341095/pen/RYyvjO

ÀÔ´Ï´Ù .. óÀ½½áºÁ¼­ .. °¡ÀÔÇÏ°í ÇÏ´À³Ä ´Ê¾ú½À´Ï´Ù.
IDE¸»°í ·¹À̾ƿô Åø À¯·áÇÁ·Î±×·¥ ¸»¾¸ ÇϽô ÁÙ ¾Ë¾Ò½À´Ï´Ù.
                         
±èÁ¦¿¬ 2018-09
codepen¿¡¼­´Â ÀߵǼ­ À̸®Àú¸® Çغ»°á°ú Àß µË´Ï´Ù.. °¨»çµå¸³´Ï´Ù.~
                         
limitless 2018-09
´ñ±Û¿¡ ¿Ã¸° ÄÚµå¿Í codepen.io Äڵ尡 ´Ù¸¨´Ï´Ù.
<colgroup> ºÎºÐ µ¿ÀÏÇÏ°Ô Àû¿ëÈÄ È®ÀÎÇغ¸¼¼¿ä
Çï·Î¿ì 2018-09
ÇнÀ¿¡ µµ¿òµÉ °÷ ¾È³» 
https://www.w3schools.com/html/html_tables.asp

(º»¹® Áß¿¡¼­ "À¥°³¹ßÀº css¶û À¥µðÀÚÀÎÀÌ 90%´Â Â÷ÁöÇϴ°Š°°³×¿ä .. "
ÀÌ ¸»¾¸Àº °³¹ßÀ» ¾ÆÁ÷ ¸ð¸£½Ã´Â ¸àÆ®ÀÔ´Ï´Ù! ^^;; )
     
±èÁ¦¿¬ 2018-09
Àú±âµµ ´ç¿¬È÷ °¡ºÃ½À´Ï´Ù...
px³ª
%·Î ¸¸ ÇÒ°æ¿ì´Â »ó°üÀÌ ¾ø½À´Ï´Ù
È¥¿ëÇÏ·Á°í ÇÏ´Ï±î ¹®Á¦°¡ »ý°Ü¼­ Áú¹® µå·È½À´Ï´Ù.


QnA
Á¦¸ñPage 5403/5684
2015-12   1495007   ¹é¸Þ°¡
2014-05   4958580   Á¤ÀºÁØ1
2019-11   7689   chohish
2014-01   3897   ¾È½ÂÇö
04-18   2125   ¸·¿ï¾ú¾î¿ä
04-21   1298   Psychophysi¡¦
2018-09   8402   ±èÁ¦¿¬
2021-02   5925   ±è¿µ±â
2014-01   4553   ¾ÆÀú¾¾53
2015-05   7244   ¹ÝÁÖ±â
2014-01   4476   À©µµ¿ì10
2011-08   6669   2CPU2
2015-05   4547   ¾È¼ºÇö
2016-07   5058   Æäºê¸®Áî
2018-10   8125   ±×³ÉÁß
2021-02   5148   °Ç¾à
05-24   1237   chotws
2019-12   2491   ÇãÀα¸¸¶Æ¾
2011-10   11397   ¿ÀÁØÈ£5
2015-06   4222   ¾È¼ºÇö
2019-12   2911   Àü»êÁ÷µù
05-29   1456   ÁعÙÀÌ