2017-10-05 1 views
-1

내가 페이지에 테이블이 동일하고 각 행은 다음 코드 등이 개 두 요소가 있습니다CSS 테이블의 열 커플

<tr> 
    <th></th> 
    <td></td> 
    <th></th> 
    <td></td> 
</tr> 

는 내가 뭘 원하는 헤더와 셀의 각 쌍을 가지고입니다 전체 테이블 너비의 50 % 너비가 있지만 고정 너비를 사용하는 것은 아닙니다. 그것에 대한 제안 사항이 있으십니까?

답변

0

tr은 "표 행"을 나타냅니다. 따라서 너비가 50 % 인 두 개의 서로 다른 행에 4th/tr을 분할하려면 두 개의 별도 테이블 행 tr을 만들어야합니다.

셀 내용에 관계없이 셀을 50 %로 유지하려면 table-layout:fixed;을 테이블에 적용 할 수 있습니다.

table { 
 
width:100%; 
 
table-layout:fixed; 
 
} 
 
th, td { 
 
    border:1px solid #000; 
 
}
<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello four</td> 
 
    </tr> 
 
</table> 
 
<br><br> 
 
<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
    </tr> 
 
    <tr> 
 
    <th>hello three hello three hello three hello three hello three hello three hello three hello three</th> 
 
    <td>hello four</td> 
 
    </tr> 
 
</table>