2010-01-28 5 views
0

내가 작업해야하는 페이지가 많습니다. 좋은 점은 모두 같은 구조를 가지고 있다는 것입니다. 그리고 마침내 이런 시각적 효과를 얻고 싶습니다.CSS 스타일링 테이블 tds

<tr><td style="width:15%;">label text</td> 
    <td style="width:35%;"><input type='text' style="width:50%"; /></td> 
    <td style="width:15%;">label text</td> 
    <td style="width:35%;"><input type='text' style="width:50%"; /></td> 
</tr> 

일반 테이블에 CSS를 적용하고 동일한 시각적 결과를 렌더링하려면 어떻게해야합니까?

답변

2

당신은 할 수 없습니다없이 하나 CSS3를 사용하거나 몇 가지 클래스를 적용하여 CSS를 도와 :

<tr> 
    <td class="label"><label for="input1">label text</label></td> 
    <td class="field"><input type="text" id="input1"></td> 
    <td class="label"><label for="input2">label text</label></td> 
    <td class="field"><input type="text" id="input2"></td> 
</tr> 

로 :

td.label { width: 15%; } 
td.field { width: 35%; } 
td.field input { width: 35%; } 

어느 쪽이든 또는 자바 스크립트를 사용하여.