열의 너비와 텍스트 정렬 지정

CSS를 사용하여 백분율로 표의 너비를 지정할 수 있습니까? 또한 특정 열의 텍스트 정렬을 지정할 수 있습니까?열의 너비와 텍스트 정렬 지정

예를 들어 나는 3 개의 열을 가진 테이블을 가지고 있습니다. 나는

col1.width = 20% 
col2.width = 40% 
col3.width = 40% 

col1.text-align = left; 
col2.text-align = right; 
col3.text-align = center;

출처

2010-06-15 xkcd

당신이 할 수있는 말을하고 싶지만, 당신의 <td> 폭이 시점에서 부모 컨테이너를 기준으로합니다.

출처

2010-06-15 19:50:20 Babiker

정확히 어떻게합니까? 각 td 요소에 클래스를 부여해야합니까? 또는 div에서 tds를 감싸고 div의 너비를 지정 하시겠습니까? 올바른 방법은 무엇입니까? – xkcd

첫 번째 질문에 대해서는 각각 col 열에 할당 된 클래스를 만듭니다. 오히려 간단합니다.

few properties to table columns 전체를 할당 할 수 있기 때문에 텍스트 정렬은 좀 더 어려워집니다. 이 경우, 하나의 솔루션은 nth-child 가상 클래스를 사용하는 것이지만 현재 Internet Explorer 버전에서 작동하지 않는 CSS 3 특정 기능입니다. this answer이 제안하는 것처럼 + 결합자를 사용하여 인접한 열의 스타일을 지정할 수도 있습니다. 그것은 CSS 2.1 기능 supported by IE >= 7입니다.

<!DOCTYPE html> 
<head> 
<meta charset=UTF-8> 
<title>Column styling</title> 
<style> 
table { 
    table-layout: fixed; 
    width: 1000px; 
} 

.firstColumn { 
    width: 20%; 
    background: #ccc; 
} 

.otherColumns { 
    width: 40%; 
    background: #eee; 
} 

td  { text-align: left } 
td+td { text-align: right } 
td+td+td { text-align: center } 
</style> 
</head> 
<body> 
<table> 
    <col class="firstColumn"> 
    <col class="otherColumns"> 
    <col class="otherColumns"> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
</table> 
</body> 
</html>

출처

2010-06-15 21:04:31

열의 너비와 텍스트 정렬 지정

답변

관련 문제