2012-06-07 2 views
1

태그의 레이블 (왼쪽)과 태그의 텍스트 입력 (레이블의 오른쪽)이있는 테이블에서 양식을 렌더링합니다.확장 가능한 HTML 폼이 사용 가능한 공간을 모두 채 웁니다.

  1. 은 세포가 가장 긴 라벨
  2. 을의 폭을 수용하기 위해 확장 : 유연성을 위해서 , 나는 마법 있도록 장소에 빠질 가능한 한 작은 CSS를 작성하고 모든 것을 가지고 싶습니다 오른쪽 필드는 내가 이러한 다양한 요소를하지만 아무 소용 width:100%width:auto의 다양한 조합을 시도했습니다

셀의 전체 너비를 채우기 위해 확장합니다. 이 작업을 수행 할 수 있습니까, 아니면 그냥 포기하고 하드 너비를 width:Npx과 같이 지정해야합니까?

답변

0

코드가 어떻게 생겼는지 확실하지 않습니다 (게시하는 경우 답변이 훨씬 더 좋음 ...).

어쨌든 : 너비가 지정되지 않으면 셀은 가장 긴 요소의 너비로 자연스럽게 확장되지만 요소를 동시에 셀 너비까지 확장 할 수 없습니다! 그러면 너비 계산이 불가능 해집니다. 그래서 어떻게 든 내부 내용을 수정하는 것이 좋습니다. 입력 필드는 모두 길이가 같을 때 멋지게 보입니다 ...

0

두 가지 옵션이 있습니다. 레이블에 유체 길이를 허용하는 표가있는 솔루션을 구현하거나 고정 너비로 ​​설정하고 표가없는 표식을 사용하십시오. 일부 웹 개발자가 <table> 요소를 태그에 사용하는 것을 피하기 위해 거의 모든 작업을 수행하지만 필자는 개인적으로 다른 솔루션보다 한 가지 솔루션을 선택할 강력한 이유가 없습니다. http://jsfiddle.net/Wexcode/VcSXU/

td:first-child { 
    white-space: nowrap; /* don't allow text to wrap to the next line */ 
} 
: 당신이 테이블을 사용하는 경우 말했다되고 그건

,이 솔루션은 매우 간단합니다

관련 문제