내용에 따라 HTML 표를 고정 폭으로 설정하십시오.

Question

HTML 표를 만들고 싶습니다. 3 개의 열이 있다고 가정 해 봅시다. 첫 번째 열의 너비를 고정시키고 다른 두 열은 사용 가능한 공간과 비율을 기준으로 확장/축소합니다.

첫 번째 열에 고정 크기 너비를 설정하고 다른 열에는 백분율을 사용하면 충분합니다. 그러나 나는 더 열심히 원한다.

브라우저 자체에서 너비를 파악하고 싶습니다.

이상적인 열 너비를 얻고 그 열의 고정 폭을 만들고 싶습니다. 텍스트를 안구에 찍고 너비를 찾아야하는 대신 브라우저는 텍스트의 자연 너비를 가져 와서 열 너비로 설정할 수 있습니다.

GUI 레이아웃 격자에서 상당히 일반적으로 수행되는 것으로, 특정 열을 고정 된 크기로 가질 수 있습니다. 크기는 열 내용의 크기에 따라 자동으로 결정됩니다. 고정 된 크기의 열을 배치 한 후에 남아있는 공간은 비 고정 크기의 열로 이동합니다.

HTML/CSS에서이를 수행 할 수있는 방법이 있습니까?

JavaScript는 여기에있는 옵션이 아니라는 점에 유의하십시오 (위키에있어 JavaScript를 소개하지 않습니다).

Answer 1

너무 어렵지는 않지만 정의하지 않는 한 콘텐츠의 크기가 정확하게 지정되지 않습니다. 당신이 콘텐트와 폭 변화 것을 볼 수 있습니다 중간과 마지막 셀의 내용을 바꿀 경우

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;"> 
    <tr> 
     <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td> 
     <td valign="top">This is a variable width column that has a lot of content</td> 
     <td valign="top">This is also a variable width column as well</td> 
    </tr> 
</table> 

이 table 사용하면 넓은으로 중간 열을 볼 수 있습니다.

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;"> 
    <tr> 
     <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td> 
     <td valign="top">This is also a variable width column as well</td> 
     <td valign="top">This is a variable width column that has a lot of content</td> 
    </tr> 
</table> 

이제 너비가 고정 된 셀에서 표를 중첩하여 재생할 수도 있습니다. 다음 예제에서는 가운데 열입니다. 이렇게하면 마지막 열의 너비가 커지고 공간을 차지할 수 있습니다.

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;"> 
    <tr> 
     <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td> 
     <td valign="top"> 
      <table width="130" cellpadding="0" cellspacing="0" style="border:none;"> 
       <tr> 
        <td>This is a fixed width table's content inside of a nested table</td> 
       </tr> 
      </table> 
     </td> 
     <td valign="top">This is a variable width column that has a lot of content and should push the boundaries</td> 
    </tr> 
</table> 

이렇게하면 표 안에 액체 내용을 처리하는 방법에 대한 몇 가지 전략이 있습니다. UPDATE - - * *

**

아마도 미안, 그 잘못 읽었다.

표는 항상 가장 넓은 셀에서 열 너비를 가져옵니다. 다양한 너비의 내용을 가진 여러 행이있는 경우 열은 모두 열 내의 가장 넓은 셀 너비를 상속합니다. 따라서 테이블의 열을 고정 너비로 ​​만들려면 고정 너비의 내용을 갖거나 고정 너비의 요소에 내용을 래핑해야합니다.

gmail, Google 리더 및 많은 온라인 이메일 클라이언트는 유사한 접근 방식을 사용하여 왼쪽에 고정 너비 탐색 기능을 사용하고 렌더링 영역을 사용자 브라우저로 확대시킵니다.

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;"> 
    <tr> 
     <td valign="top"> 
      <table width="50" cellpadding="0" cellspacing="0" style="border:none;"> 
       <tr> 
        <td>This is a fixed width column, it's only 50 pixels wide</td> 
       </tr> 
      </table> 
     </td> 
     <td valign="top"> 
      <table width="130" cellpadding="0" cellspacing="0" style="border:none;"> 
       <tr> 
        <td>This is a fixed width table's content inside of a nested table</td> 
       </tr> 
      </table> 
     </td> 
     <td valign="top">This is a variable width column that has a lot of content and should push the boundaries</td> 
    </tr> 
</table> 

일반적으로 CSS에서는이 작업을 수행하지만이 방법을 사용하면 표 셀의 너비를 정의하지 않습니다. 그들은 콘텐츠에서 너비를 상속 받게됩니다. 내용에 고정 너비가없는 세 번째 열은 사용자의 웹 브라우저 너비와 함께 커지고 유동적입니다.