웹개발은 css랑 웹디자인이 90%는 차지하는거 같네요 ..
초보여서 헤메는 중인데 ... 매번 테이블 1개짜리만 쓰다가 테이블 여러개 있는거 쓰려니까
좀 막히네요 .. table 사용시 ..
colgroup 에서 ..
col width 값을 100% 라고 봤을때 앞에 no 부분만.. 50px로 하고 .. 나머지는 균등하게 .. 쫙 펼치고 싶은데..
그게 안되네요 px와 %가 혼합이 안되나 보네요 .. 10% 10% 이런식으로 하면..
위쪽 테이블이랑.. 칼럼 폭이 안맞고..
혹시 첫번재 칼럼만 px로 고정하고 나머지는 균등한 폭으로 할수 있는 방법 알고 계시면
팁 부탁 드리겠습니다. 고맙습니다.
https://www.w3schools.com/css/css3_flexbox.asp
테이블에서는 그런 방법이 없습니다.
js 등을 이용해서 잘~ 계산해서 %나 px를 설정해야 합니다.
js로 된 프로그램을 쓰시는 것도 좋구요.
https://datatables.net/
칸도 엄청 많아서 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> </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>
<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 />
로 적어주면 됩니다.
이렇게 쉬운 방법이 있었네요 .. 꼭 지정해줘야 하는줄.. -_-;;답변 감사 합니다.
table-layout: fixed;
}
----------
내용이 들어가도 그대로 유지됩니다.
다만 컨텐츠가 삐져나가는 일이 생길 수도 있습니다 ㅎㅎ
브라우져에 따라서 다르게 동작할 수도 있어서
flex나 유료 테이블 js를 추천 드렸던 것 입니다.
돈 좀 쓰더라도 개발 효율측면에서 편한 것이 좋은 것 같습니다.
작업시간도 비용이니까요...
작업효율 높일 수 있다면 유로제품 사용하고 있습니다.
브라우저 호환성을 고려한다면 flex 는 사용하기 어려울 수 있습니다.
IE 하위 버전에서는 지원이 안됩니다..
브라우저에 맞추려면 div 로 레이아웃 구성하고 CSS 적용하는게 이슈가 적은 것 같습니다.
진행하다보면 IE 구버전때문에 제일 난감한것 같습니다.
codepen.io 이나 유사한 사이트에 코드 올려서 공유해주세요.
상기 예제 참고하시면 도움이 될 것 같습니다.
사용하시는것이다 추천하는게 있으시면 추천 부탁 드립니다.
webstorm, phpstorm, atom ....
JetBrain 제품 패키지로 구매해서 사용중에 있습니다..
참고로 더 말씀드리면 하드코딩이 기본인 것 같습니다.
처음에는 Noteplus++ 를 추천드리고 싶습니다. 하다보면 어느새 '인간 코딩기기' 느낌이 날때가 있습니다
입니다 .. 처음써봐서 .. 가입하고 하느냐 늦었습니다.
IDE말고 레이아웃 툴 유료프로그램 말씀 하시는 줄 알았습니다.
<colgroup> 부분 동일하게 적용후 확인해보세요
https://www.w3schools.com/html/html_tables.asp
(본문 중에서 "웹개발은 css랑 웹디자인이 90%는 차지하는거 같네요 .. "
이 말씀은 개발을 아직 모르시는 멘트입니다! ^^;; )
px나
%로 만 할경우는 상관이 없습니다
혼용하려고 하니까 문제가 생겨서 질문 드렸습니다.