회원K 2018-09

테이블보다 flex를 쓰시는 것을 추천 드립니다.
https://www.w3schools.com/css/css3_flexbox.asp

테이블에서는 그런 방법이 없습니다.
js 등을 이용해서 잘~ 계산해서 %나 px를 설정해야 합니다.

js로 된 프로그램을 쓰시는 것도 좋구요.
https://datatables.net/

김제연 2018-09

flex박스는 layout 잡을 때 이외엔 잘 안쓰게 되가지고요 ..
칸도 엄청 많아서 div같은걸로 하기가..

만년초보 2018-09

초보자로서 제가 할 수 있는 방법을 한번 시도해봤습니다.
하나의 테이블로 처리했습니다.
위쪽 테이블과 아래쪽 테이블의 칼럼을 동일하게 맞출려면 하나의 테이블이 되어야 할거라 생각합니다.
 
<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나
%로 만 할경우는 상관이 없습니다
혼용하려고 하니까 문제가 생겨서 질문 드렸습니다.