CSS 표시 :

Question

난 이런 CSS 테이블 설정이 너무 넓 테이블 첫번째 컬럼 :

<div class='table'> 
<div> 
    <span>name</span> 
    <span>details</span> 
</div> 
</div> 

테이블의 CSS는 :

.table{ 
display:table; 
width:100%; 
} 
.table div{ 
text-align:right; 
display:table-row; 
border-collapse: separate; 
border-spacing: 0px; 
} 
.table div span:first-child { 
text-align:right; 
} 
.table div span { 
vertical-align:top; 
text-align:left; 
display:table-cell; 
padding:2px 10px; 
} 

그것이 두 열 균등 분할 로선 테이블 너비가 차지하는 공간 사이. 첫 번째 열을 그 셀을 차지하는 텍스트가 필요로하는 너비만큼만 가져 오려고합니다.

표는 알 수없는 너비이며 열/셀도 마찬가지입니다.

Answer 1

1px과 같이 작은 너비 만 지정하십시오. 표 셀은 항상 내용에 맞게 가능한 가장 작은 크기로 확장됩니다.

Answer 2

여러분은 클래스 이름 "table"을 다른 것으로 변경해야합니다. "table"은 div보다 일부 테이블의 클래스임을 제안합니다.

시도

<div class='table'> 
<div> 
    <span style="width:30%">name</span> 
    <span>details</span> 
</div> 
</div> 

Answer 3

당신은 테이블 내에서 최초의 사업부를 발견하고 그것을 가진 별도의를 제공하기 위해 첫째 아이 선택기를 사용할 수 있습니다 다음과 같습니다.

.table div:first-child 
{ 
    width:30%; 
} 

Answer 4

나는 당신이 그 행에 의해 다른 경우가 텍스트의 크기로 얻을 수 있다는 것을 알고하지 않습니다하지만 당신은 폭 = "자동"또는 열에 대한 백분율 폭을 설정하는 시도 할 수 있습니다.

Answer 5

시도 ->table-layout: fixed