다른 크기의 셀을 사용하여 테이블 만들기

모양을 깔끔하게 보이게 만들고 셀의 정보에 따라 셀 크기를 다르게하고 싶습니다. 어떻게 위의 것과 다른 셀 너비를 만들까요?다른 크기의 셀을 사용하여 테이블 만들기

이제는 1 셀 높이를 만들고 그 오른쪽에 많은 작은 셀이있는 것을 알고 싶습니다.

예 :

<html> 
    <table border="1"><td width="50">some info</td><td width="50">some more info</td> 
    <tr> 
    <td width="250">Lots more text and information in this box then the first cell</td><td>  other information</td>

내가 첫 번째 행의 첫 번째 셀이 자동으로 두 번째 행의 첫 번째 셀의 길이로 크기를 조정하지 않습니다.

예 :

|some info|some more info| 

|Lots more text and information in this box then the first cell|other information|

또는 깨끗한 보일 것이 밖으로 누워 적어도 또 다른 방법이?

출처

2011-09-29 Justin Yoder

, 당신이 원하지 않는 테이블을 사용합니다. – Blazemonger

테이블의 모든 열은 항상 비슷한 너비를 가지므로 변경할 수는 없으며 하나의 셀만 추가하고 두 번째 행에는 일정량의 셀을 포함 할 수 있습니다. 테이블 행과 열, 필요에 따라 늘릴 수 "세포"를 만들 수있는 CSS min-width 속성을 시뮬레이션하기 위해 사용 된 div -

<html> 
     <table border="1"> 
     <tr> 
      <td width="50">some info</td> 
      <td width="50">some more info</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td width="250" colspan="3">Lots more text and information in this box then the first cell</td> 
      <td>  other information</td>

출처

2011-09-29 18:54:15 Nikita

정확히 내가 무엇을 찾고 있었는지. 고맙습니다 –

은이를보십시오.

http://jsfiddle.net/HN4YS/1/

HTML :

이

<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div> 
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>

CSS : 동일한 폭으로 열의 모든 셀을하지 않으려면

.col1, .col2 { 
    display: inline-block; 
    min-width: 150px; 
    border: 1px solid; 
    padding: 4px; 
} 
.row { 
    white-space: nowrap; 
}

출처

2011-09-29 18:54:37 Blazemonger

다른 크기의 셀을 사용하여 테이블 만들기

답변

관련 문제