고정 너비와 확장 열이있는 복잡한 표 배치

Question

복잡한 표 배치 (jsfiddle)가 있습니다. 이것은 많은 섹션이있는 긴 보고서이며 각 섹션에는 테이블이 있습니다.

테이블의 처음 두 열은 잘 정렬되도록 고정 너비가 있어야합니다.

세 번째 열은 줄 바꿈하지 않고 텍스트 내부에 맞게 늘려야합니다 (항상 한 단어 임).

마지막 열은 항상 나머지 공간을 채워야합니다.

첫 번째 두 열의 너비를 지정하고 마지막 열을 100 % 너비로 지정하면 마지막 열이 사용 가능한 공간을 채우지 만 처음 두 열의 너비는 무시됩니다.

테이블에 을 입력하면 첫 번째 두 열의 너비는 작동하지만 세 번째 열에 고정 너비를 지정할 수 없으므로 마지막 두 열이 같은 화면 공간을 차지합니다.

해결 방법은 있습니까?

참고 :이 솔루션은 IE에서 작동하지 않아도됩니다! FF 12+ 및 Chome 21+만으로 충분합니다.

Answer 1

(예 : '100 %') 일반 표를 지정하십시오. 그런 다음 처음 두 열의 너비 만 지정하면됩니다. 따라서 두 사람은 원하는대로 행동합니다. 간단히 말해서

Here is the fixed fiddle.

: 당신이 jsfiddle http://jsfiddle.net/RVSbJ/에서 볼 수 있듯이

• 는 td.type { width: 100%; }​
• 이 td.name