Bootstrap: ์ ‘๋ฏธ์‚ฌ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ํ…Œ์ด๋ธ”์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

์— ๋งŒ๋“  2012๋…„ 08์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: twbs/bootstrap

codepen์—์„œ ๋งŒ๋“  ๋ฐ๋ชจ๋ฅผ ๋ณด์‹ญ์‹œ์˜ค.

http://codepen.io/leomao10/pen/tEuqC

ํ…Œ์ด๋ธ” ํ—ค๋”๋ฅผ ๋ถ™์ด๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ affix.js์—์„œ ๋งŒ๋“  ์ƒˆ ํ…Œ์ด๋ธ” ํ—ค๋”๊ฐ€ ์›๋ž˜ ๋„ˆ๋น„๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ํ•˜๋ฃจ ๋™์•ˆ ๋‚˜๋ฅผ ๊ดด๋กญ ํžˆ๊ณ  ์—ฌ์ „ํžˆ ๋‹จ์„œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

ad์— ๋Œ€ํ•ด position:fixed ์ดํ›„์— rowspan์ด TH์— ๋Œ€ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
๊ณ ์ • ๋„ˆ๋น„ ์„ค์ •์ด ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค(ํฌ๋กฌ์—์„œ ์ž‘๋™).

  $(".floating-header th").each(function() {
      $(this).width($(this).width());
  });

์˜ˆ, ์ด์ œ ํ—ค๋”๊ฐ€ ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค. :)

affix.js๊ฐ€ ์›๋ณธ ํ—ค๋”๋ฅผ ์ˆจ๊ธธ ๋•Œ tbody์˜ ์—ด ๋„ˆ๋น„๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ทธ๊ฒƒ์„ ๊ณ ์น  ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

@genbit , ๋„์™€์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๋ฌด์–ธ๊ฐ€๋ฅผ ๋ฐฐ์น˜ํ•  ๋•Œ ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ๋กœ์„œ๋Š” ํ…Œ์ด๋ธ” ํ—ค๋” ์ˆ˜์ •์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰